JS实现搜索框文字可删除功能
废话不多说了，直接给大家贴js搜索框文字可删除功能，具体代码如下所示：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>JS实现搜索框文字可删除</title>
<style>
*:focus{outline:none;}
body{width:400px;margin:100pxauto;}
#topsearch{height:33px;}
#topsearch.input{border:1pxsolid#77c03a;height:100%;}
#topsearch.input.clear{width:30px;height:35px;line-height:30px;text-align:center;padding-right:10px;visibility:hidden;opacity:0.8;color:gray;}
#topsearchinput[type=text]{height:20px;width:250px;border:none;padding:5px;}
#topsearchdiv{float:left;}
#topsearchbutton{width:100px;height:35px;background:#77c03a;color:#fff;border:none;}
</style>
</head>
<body>
<divid="topsearch">
<divclass="input"><inputtype="text"id="search"><spanclass="clear"id="delete">×</span></div>
<buttontype="button"name="searchz">Search</button>
</div>
<script>
document.getElementById("search").addEventListener("keyup",function(){
if(this.value.length>0){
document.getElementById("delete").style.visibility="visible";
document.getElementById("delete").onclick=function(){
document.getElementById("search").value="";
}
}else{
document.getElementById("delete").style.visibility="hidden";
}
});
</script>
</body>
</html>