html文本框点击消失默认值怎么做?

发布时间:2019-09-21编辑:脚本学堂
有关html文本框中点击,然后默认值消失的方法,文本框焦点事件的例子,鼠标点击文本框则内容消失,感兴趣的朋友参考下。

一种经常用到的文本框效果,那种有文字的输入框,这个输入框在鼠标进行点击操作后,会暂时消失里面的提示文字。

如果不输入又会恢复默认文字,如“请输入要留言的内容,最多500个文字长度”,此效果实现套用简单的鼠标触发来清空输入框的默认值,可以多套用多种文本输入框,如多行文本框、单行文本框、搜索框等。

代码:
 

<textarea  rows="2" onfocus="if(this.value=='plc学习网:http://www.plcxue.com') {this.value='';}this.style.color='#ff0000';" onblur="if(this.value=='') {this.value='plc学习网:http://www.plcxue.com';this.style.color='#666';}"maxlength="40">plc学习网:http://www.plcxue.com</textarea>

说明:
点击文本框,默认值会消失,输入的文字将变成红色,不输入文字将恢复原来的默认值。