以上是某东搜索框为力求同步写了以下代码。文字消失和怎样获取焦点失去焦点事件方法就不在一一赘述！
以下用到表单事件：
Form 事件
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
| 属性 | 值 | 描述 |
|---|---|---|
| onblur | script | 元素失去焦点时运行的脚本。 |
| onchange | script | 在元素值被改变时运行的脚本。 |
| oncontextmenu | script | 当上下文菜单被触发时运行的脚本。 |
| onfocus | script | 当元素获得焦点时运行的脚本。 |
| onformchange | script | 在表单改变时运行的脚本。 |
| onforminput | script | 当表单获得用户输入时运行的脚本。 |
| oninput | script | 当元素获得用户输入时运行的脚本。 |
| oninvalid | script | 当元素无效时运行的脚本。 |
| onreset | script | 当表单中的重置按钮被点击时触发。HTML5 中不支持。 |
| onselect | script | 在元素中文本被选中后触发。 |
| onsubmit | script | 在提交表单时触发。 |
下面是代码环节
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
position: relative;
width: 250px;
height: 20px;
margin:99px auto;
/*border:2px solid red;*/
outline:2px solid red ;
outline-offset: 10px;
}
div::before{
content: "手机";
font-size: 20px;
/*position: absolute;*/
line-height: 20px;
}
input{
font-size: 20px;
position: absolute;
height: 30px;
left: 0;
top: 50%;
margin-top:-15px;
border: none;
outline: none;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="">
<input type="text" name="" id="" value="" />
</div>
<script type="text/javascript">
var ipt = document.getElementsByTagName("input");
var d = document.getElementsByTagName("div");
ipt[0].onfocus = function(){
d[0].setAttribute("style","color: #999;");
}
ipt[0].onblur = function(){
d[0].setAttribute("style","color: #111;");
}
ipt[0].oninput = function(){
// if(ipt[0].oninput){ipt[0].setAttribute("style","opacity: 1;");}
ipt[0].setAttribute("style","opacity: 1;");
// d[0].setAttribute("style","color: white;");
if(ipt[0].value == ""){ipt[0].setAttribute("style","opacity: 0.7;");}
}
</script>
</body>
</html>
下面是搜索框页面效果至于后面的搜索按钮都不重要啦，大家可以去京东手机官网去验证下效果！