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" /> </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数学运算用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsyxx.html