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

模板网 2014-09-19

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

本例中还添加了在不同情况下文本框中的文本颜色不同的效果，默认情况下输入框中的字体颜色为#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="请输入您的姓名" >

相关文章

  1. JS手机端跳转代码

    JS手机端跳转代码，通过判断浏览器版本来判断是手机端还是PC端，然后可以做相应的操作。 能够判断IE内核，opera内核，苹果、谷歌内核，火狐内核，是否为移动终端 ，android终端或者uc浏览器，是否为iPhone或者QQHD浏览器，是否iPad，是否web应该程序，没有头

  2. 假404效果代码

    假404效果代码，使用frameset框架覆盖原网页内容，实现网页打不开的假象，直接在网站头部引用404.js即可。 代码下载： 假404效果代码 效果截图：

  3. html5输入框正则验证

    html5输入框正则验证，输入框禁止粘贴，禁止右键菜单。

  4. 最新获取网站访客QQ接口代码-20141015

    分析某网站得到的一枚获取访客QQ的接口，原理和以前的一样jsonp 不废话，直接上代码，不懂的直接百度，这种技术应该早就烂大街了。 详细接口及利用代码： 复制代码 代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(

  5. JS 文本框默认提示信息点击清空

    JS 文本框默认提示信息点击清空，关键的代码。 复制代码 代码如下: onfocus=if(this.value==this.defaultValue){this.value=;}; onblur=if(this.value==){this.value=this.defaultValue;} type=text 效果截图:

随机推荐

  1. JS手机端跳转代码

    JS手机端跳转代码，通过判断浏览器版本来判断是手机端还是PC端，然后可以做相应的操作。 能够判断IE内核，opera内核，苹果、谷歌内核，火狐内核，是否为移动终端 ，android终端或者uc浏览器，是否为iPhone或者QQHD浏览器，是否iPad，是否web应该程序，没有头

  2. 假404效果代码

    假404效果代码，使用frameset框架覆盖原网页内容，实现网页打不开的假象，直接在网站头部引用404.js即可。 代码下载： 假404效果代码 效果截图：

  3. html5输入框正则验证

    html5输入框正则验证，输入框禁止粘贴，禁止右键菜单。

  4. 最新获取网站访客QQ接口代码-20141015

    分析某网站得到的一枚获取访客QQ的接口，原理和以前的一样jsonp 不废话，直接上代码，不懂的直接百度，这种技术应该早就烂大街了。 详细接口及利用代码： 复制代码 代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(

  5. JS 文本框默认提示信息点击清空

    JS 文本框默认提示信息点击清空，关键的代码。 复制代码 代码如下: onfocus=if(this.value==this.defaultValue){this.value=;}; onblur=if(this.value==){this.value=this.defaultValue;} type=text 效果截图: