主要实现了:
1.鼠标点进去里面内容为空
2.鼠标点击外部里面自动获取内容
3.用户输入的内容后点击外部,用户输入内容不能消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防京东搜索框</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
#search{
width: 550px;
height: 35px;
margin: 100px auto;
}
#search input{
border: 1px solid #f10215;
outline-style: none; /*去掉最外层的框*/
width: 494px;
height: 33px;
float: left;
padding-left: 4px; /*设置内边距,防止挨着文本框*/
color: #888;
font-size: 14px;
font-family: "微软雅黑";
}
#search button{
width: 50px;
height: 35px;
background-color: #f10215;
float: left;
}
</style>
<script>
window.onload = function (){
function $(id){
return document.getElementById(id);
}
var Txt =$('search').getElementsByTagName('input')[0]; //此时表示选中第一个input标签
Txt.onfocus = function (){
this.style.color = 'black'; //获取焦点时为黑色
if(this.value == '手机' ){
this.value = '';
}
}
Txt.onblur = function (){
if(this.value == ''){ //没有输入的话,给其赋“手机”;
this.value = '手机';
}
this.style.color = '#888'; //颜色为灰色
}
}
</script>
</head>
<body>
<div id="search">
<input type="text" value="手机">
<button id="Search">搜索</button>
</div>
</body>
</html>