Javascript特效之高亮顯示選中的文本框

                           Javascript特效之高亮顯示選中的文本框

今天我們來看看怎麼實現網頁文本框選中時高亮顯示文本框以提醒當前正在輸入的文本框。

效果：

當我們選中文本框時，文本框背景顏色變爲深藍色。

實現思路：

用js爲文本框註冊onfocus獲得焦點事件，在獲得焦點事件觸發時添加寫好的高亮樣式即可。

js代碼：

var currentlyActiveInputRef = false;
var currentlyActiveInputClassName = false;
function highlightActiveInput()
{
	if(currentlyActiveInputRef){
		currentlyActiveInputRef.className = currentlyActiveInputClassName;
	}
	currentlyActiveInputClassName = this.className;
	this.className = 'inputHighlighted';
	currentlyActiveInputRef = this;
	
	
}
function blurActiveInput()
{
	this.className = currentlyActiveInputClassName;
	
	
}
function initInputHighlightScript()
{
	var tags = ['INPUT','TEXTAREA'];
	
	for(tagCounter=0;tagCounter<tags.length;tagCounter++){
		var inputs = document.getElementsByTagName(tags[tagCounter]);
		for(var no=0;no<inputs.length;no++){
			if(inputs[no].className && inputs[no].className=='doNotHighlightThisInput')continue;
			
			if(inputs[no].tagName.toLowerCase()=='textarea' || (inputs[no].tagName.toLowerCase()=='input' && inputs[no].type.toLowerCase()=='text')){
				inputs[no].onfocus = highlightActiveInput;
				inputs[no].onblur = blurActiveInput;
			}
		}
	}
}

用js實現比較麻煩。我們來看看怎麼用jquery實現：

我們先引入jquery文件後。用兩段代碼即可實現：

$("input,textarea").focus(function(){
	$(this).addClass("inputHighlighted");
});
$("input,textarea").blur(function(){
	$(this).removeClass("inputHighlighted");
});

爲所有文本框和文本域註冊獲得焦點事件和失去焦點事件。然後分別爲當前元素this添加和去除高亮的樣式即可。

這裏還有一點說明，如果是在focus事件裏面用alert會無限彈出消息，因爲先執行了focus再顯示alert 結果造成了焦點轉移.