js实现仿京东搜索框

js所实现的功能是在搜索框里点击,框内文字清空,新打上的文字变色(蓝色)。
onfocus事件在对象获得焦点时发生

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	京东搜索框</title>
	<style>	
		*{
			margin: 0;
			padding: 0;
			border: 0;
		}
		.sousuokuang{
			width: 550px;	
			height: 35px;	
			margin: 100px auto;
		}
		.sousuokuang input{
			width: 490px;
			height: 34px;
			border: 1px solid #f10125;
			outline-style: none;
			float: left;
			padding-left: 4px;
			color: #999;
			font-size: 14px;
			font-family: "黑体";
		}	
		.sousuokuang button{
			width: 50px;
			height: 34px;
			background-color: #f333;
			float: left;
		}
	</style>
</head>
<body>
	<div id="ssk" class="sousuokuang">	
		<input type="text" value="手机" />
		<button>搜索</button>
	</div>
	<script>
		var div = document.getElementById("ssk");
		var ipt = div.getElementsByTagName('input')[0];//[0]表示出现的首次
		ipt.onfocus = function(){
			if(this.value =='手机'){
				this.value ='';//内容清空
				this.style.color = "blue";//变蓝色
			}
		}
		ipt.onblur=function(){
			if(this.value == ''){
				this.value = '手机';

			}
		}
	</script>
</body>
</html>
发布了3 篇原创文章 · 获赞 2 · 访问量 344

猜你喜欢

转载自blog.csdn.net/weixin_44810919/article/details/104235096