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 结果造成了焦点转移.