修改文本框的颜色-光标的显示明显

最新推荐文章于 2023-12-01 14:18:56 发布

原创最新推荐文章于 2023-12-01 14:18:56 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #input

JS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的文本框焦点高亮效果。当用户点击文本框时，文本框背景色会发生变化以提示用户当前活动的输入区域，提高了用户体验。

我们的页面是使用光标跳转的，但是光标在文本框中不是很明显，有时候会看不清光标在那个域中，所以现在增加对文本域的标识，进入域变色，离开的时候再变回来，

在页面中增加下面的控制实现

<script type="text/javascript">
window.onload = function (){
	var inputs = document.getElementsByTagName("input");
	for (var i=0,j=inputs.length;i<j;i++){
	var ccc = inputs[i].type;
		if(inputs[i].type == "text"){ 
	       inputs[i].change = false;
	       inputs[i].onfocus = inputs[i].onblur = changeBgColor;
		}
	}
}

function changeBgColor(){
 	if(this.type == "text"){
		this.style.background = this.change?"#fff":"#0099CC";
		this.change = !this.change;	
	}
}
</script>