首页>>表单>>原生的input输入后显示删除按钮(2017-03-05)

原生的input输入后显示删除按钮

原生的input输入后显示删除按钮
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. document.getElementById("search").addEventListener("keyup",function(){  
  3.     if(this.value.length>0)  
  4.     {  
  5.         document.getElementById("cls").style.visibility="visible";  
  6.         document.getElementById("cls").onclick=function()  
  7.         {  
  8.             document.getElementById("search").value="";  
  9.         }  
  10.     }else  
  11.     {  
  12.         document.getElementById("cls").style.visibility="hidden";  
  13.     }  
  14. });  
  15. </script>  
XML/HTML Code
  1. <div id="baidu">  
  2.     <div class="input">  
  3.         <input type="text" id="search"><span class="clear" id="cls">X</span>  
  4.     </div>  
  5.     <button>搜索</button>  
  6. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_596.html