js仿京东搜索框

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>京东搜索框</title>
       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   </head>
   <body>
       <div id="demo">
           <input type="text" name="" id="te" value="搜索" />
       </div>
       <script type="text/javascript">
           var inp = document.getElementById('te');

           inp.onfocus = function(){
               if(inp.value === '搜索'){
                   this.value = '';
               }
           }
           inp.onblur = function(){
               if(inp.value === ''){
                   this.value = '搜索';
               }
           }
       </script>
   </body>
</html>

相关文章