鼠标事件:文本输入框文字清除、选中的代码

发布时间：2018-08-21 21:10:48 所属栏目：PHP教程来源：站长网

导读：js鼠标事件，这是WEB日常开发经常用到的，比如我们在处理input文本框的内容时，当value的值为实际内容时，此时假如我们需要访客重新输入，或者把value当作提示文字时，怎么能让网站体验达到最高呢，那就是方便访客输入，这就用到了本文中的特效。关于js鼠

　　js鼠标事件，这是WEB日常开发经常用到的，比如我们在处理input文本框的内容时，当value的值为实际内容时，此时假如我们需要访客重新输入，或者把value当作提示文字时，怎么能让网站体验达到最高呢，那就是方便访客输入，这就用到了本文中的特效。关于js鼠标的事件，烈火讲到很多，例如：javascript鼠标事件总结、Js Event之鼠标事件、鼠标触发文字变色、Input输入框点击消失鼠标离开还原、输入框(Input)默认的文字为灰色等等，更多相关教程，请用烈火站内搜索查找吧！

　　那么本文讲的就是提高网站用户体验的小技巧之：鼠标点击或经过时，文本输入框文字清除、选中的功能。

　　下面就来看一下实际效果：

<html> <head> <title>鼠标点击文本框后，里面的文字就消失或全选中 - 网页特效来自：烈火学院 Liehuo.Net</title> </head> <body> 鼠标点击文字消失：<input name="textfield" style="color:#CCC;" type="text" value="点击文字消失" size="12" onclick="value='';focus()" /> <br/> <br/> 鼠标点击文字选中：<input name="textfield" type="text" value="点击文字选中" size="12" onclick="focus();select()" /> <br/><br/> <input name="key" type="text" id="key" style="color:#CCC;" value="烈火学院" size="30" onmouseover=this.focus();this.select(); onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#CCC'}" style="color:#ccc" /> <script type="js/text"> function aa(){ if((document.getElementsById(key).value).trim()==""){ alert("key"); return false; } } </script> <input type="submit" id="ddf" onclick="return aa();"> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

PHP学习入门的一些基础	显露照片exif信息PHP代
聊聊Web 2.0 时代PHP的	PHP网站开发中对于包含