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输入框默认文本点击清空，无输入显示效果

<title>input输入框默认文本点击清空，无输入显示效果</title>
姓名:<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="请输入您的姓名" >

随机推荐

Bcastr3.0详细使用教程
Bcastr 3.0 beta flash 通用的图片浏览器 bcastr3.0 beta 是一款通用的图片浏览器可以用于各种新闻系统或者blog系统 .可以读取xml设置播放列表,自定义xml地址 .可以将图片地址直接写网页中直接,不需要xml .自动适应图片大小 .循环播放，自定义自动播放时间
input输入框默认文本点击清空，无输入显示效果
网页上用到表单的地方经常会用到这样的效果，输入框中默认的情况下会有一段引导性的文字，当用户点击输入框的时候默认的文字会被情况，当输入框失去焦点并且用户没用输入内容的时候，再次显示默认文本。本例中还添加了在不同情况下文本框中的文本颜色不同的
nTabs纯JS实现的标签切换功能代码
nTabs纯JS实现的标签切换功能代码，使用非常方便。
JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码，标题不间断自右向左滚动。代码简单容易理解，加快或减慢滚动速度只需修改setInterval函数的时间参数即可，本效果默认时间间隔是400毫秒。
JS阻止浏览器返回代码
一段可以阻止浏览器返回的代码，今天无意打开了一个网站，发现怎么也返回不了，仔细研究了一下网站代码找到了无法返回的原因，于是将这段代码提取出来了。仅供大家学习交流，请勿使用在自己的网站上，这算是一种比较流氓的行为。

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

相关文章

随机推荐