javascript实现文本框默认内容Demo

最新推荐文章于 2021-11-20 21:52:59 发布

shawn_lu

最新推荐文章于 2021-11-20 21:52:59 发布

阅读量420

点赞数

分类专栏： JS 文章标签： javascript function input button search class

本文链接：https://blog.csdn.net/shawn_lu/article/details/6601391

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>

   <head>
       <title>javascript实现文本框默认内容Demo</title>
       <script type="text/javascript">
           window.οnlοad=function(){
               document.getElementById("txtSearch").οnfοcus=function(){
                   if(this.value="DefaultKey"){
                       this.value='';
                   }
               };

               document.getElementById("txtSearch").οnblur=function(){
                   if(!this.value){
                       this.value='DefaultKey';
                   }
               };
           }

           //显示搜索的关键词
           function showSearch(){
               var keyword=document.getElementById("txtSearch").value;
               var result=document.getElementById("txtResult");
               result.firstChild.nodeValue=keyword;
           }
       </script>
       <style type="text/css">
           p{
               display:inline;
           }

           .default{
               color:#ccc;
           }
       </style>
   </head>
   <body>
       <input type="text" id="txtSearch" value="DefaultKey" class="default"/>
       <input type="button" id="btnSearch" value="Search" οnclick="showSearch()">
       <p>SerachedKeyword:</p><p id="txtResult">Result</p>
   </body>
</html>