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>