网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 JS实现输入框提示文字点击时消失效果
内容
    本文实例讲述了JS实现输入框提示文字点击时消失效果。分享给大家供大家参考,具体如下:
    在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了。
    下面就是这个效果实现用到的JS代码:
    <script language="JavaScript" type="text/javascript">
      function addListener(element,e,fn){
        if(element.addEventListener){
           element.addEventListener(e,fn,false);
         } else {
           element.attachEvent("on" + e,fn);
         }
      }
      var myinput = document.getElementById("myinput");
      addListener(myinput,"click",function(){
      myinput.value = "";
      })
      addListener(myinput,"blur",function(){
      myinput.value = "请输入您的ID";
      })
    </script>
    只要把这段代码保存成一个JS文件就可以的,在网页里做好引用就OK,轻松的完成这个给不会程序的人看起来很难的效果。
    Html代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
     <title>文本框点击时文字消失,失去焦点时文字出现</title>
     </head>
     <body>
     <input type="text" value="请输入您的ID" id="myinput" />
     </body>
    </html>
    <script language="JavaScript" type="text/javascript">
      function addListener(element,e,fn){
        if(element.addEventListener){
           element.addEventListener(e,fn,false);
         } else {
           element.attachEvent("on" + e,fn);
         }
      }
      var myinput = document.getElementById("myinput");
      addListener(myinput,"click",function(){
      myinput.value = "";
      })
      addListener(myinput,"blur",function(){
      myinput.value = "请输入您的ID";
      })
    </script>
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/14 18:50:29