input输入框默认文本点击清空,无输入显示效果

查看演示效果

网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。 本例中还添加了在不同情况下文本框中的文本颜色不同的

网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。

本例中还添加了在不同情况下文本框中的文本颜色不同的效果,默认情况下输入框中的字体颜色为#CCC,当用户输入文字后,字体颜色变为#333。

复制代码 代码如下:

姓名:<input type="text" style="color:#CCC;" onclick="if(this.value==this.defaultValue){this.value='';this.style.color='#333';}" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#CCC';}" value="请输入您的姓名" >

代码解释:

代码主要使用了两个事件 onclick 点击事件(也可以使用onfocus事件), onblur 输入框失去焦点事件。this.defaultValue为输入框的默认文本。

效果截图:

input输入框默认文本点击清空,无输入显示效果

所属频道:JS代码/更新时间:2014-09-19
相关JS代码
@2014 www.120muban.com模板库