JavaScript实现输入框点击时提示文字消失效果

JavaScript实现输入框点击时提示文字消失效果

本文详细介绍如何利用JavaScript实现网页输入框的提示文字交互效果，即点击时提示文字消失，失去焦点时恢复。该方案供开发者参考与使用。

在常见的网页登录界面中，输入框内常显示颜色较浅的提示文字，告知用户应输入的内容。这种“点击时文字消失，失去焦点时文字出现”的效果，是网站开发中常用的基础交互功能。掌握此JavaScript代码对于前端开发者而言至关重要，既方便自行编写，也便于在需要时直接调用备用。

以下是实现该效果所需的核心JavaScript代码。

<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文件，并在网页中正确引用即可。这样，即使不具备深厚编程背景的人员，也能轻松实现看似复杂的前端交互效果。

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相关知识，可参考本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文提供的解决方案对您的JavaScript程序设计有所帮助。