光标聚焦事件—搜索框实例

要点:

1.  .onfocus事件是光标聚集响应的事件 .onblur是焦点失去事件

2.  注意光标聚焦时,将提示内容去掉,并将字体的前景色改为黑色,和用户输入颜色上作区分,在改回提示内容时,将前景色改为灰色

html和内置的js代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" value="请输入搜索内容" id="text">

	<script type="text/javascript">
		function my$(id){
			return document.getElementById(id);
		}
		my$("text").onfocus=function(){
			if (this.value=="请输入搜索内容") {
				this.value="";
				this.style.color="black";
			}
			// 判断焦点聚集时,如果内容为请输入搜索内容,将提示内容
			// 清除并且将文本内容的前景色改为黑色
		}
		my$("text").onblur=function(){
            if(this.value==""){
            	this.value="请输入搜索内容";
            	this.style.color="gray";
            }
            // 当失去焦点时,判断搜索框内部是不是空,如果为空就是点击了
            // 但是没有点击搜索,就还原原来的状态
		}
		// 同时,这个案例思路可以将前面写的一个事件控制div的显示与隐藏改变一下
		// 同时,判断是否输入了搜索内容,可以用 this.value.length == 0 代替,因为这样速度更快
	</script>
</body>
</html>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/83661388