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. HTML图片热区map area谷歌浏览器Google去除边框

    HTML图片热区map area去除边框默认的情况下 在Google浏览器中打开的时候周围会有蓝色的边框。 在area中加入以下代码可以去除边框: hidefocus=true onfocus=this.blur(); 完整代码如下: 复制代码 代码如下: img src=http://www.120muban.com/statics/images/l

  2. 空间绑定多个域名 添加统计代码的方法

    医疗建站中很多时候我们会在一个空间上绑定多个域名，但是希望给每个域名单独添加统计代码，下面医疗模板库www.120muban.com为大家带来实现这种需求的方法。 其实只需要通过JS来判断当前的网页域名，根据域名的不同输出不同的统计代码即可； 复制代码 代码如

  3. QQ添加好友代码

    QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a

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

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

  5. 最新获取访客QQ接口—20140915

    最新获取访客QQ接口,分析某网站代码得到的最新获取访客QQ的接口，接口地址： http://x.pet.qq.com/vip_platform?cmd=entercallback=aaa 复制代码 代码如下: script window.www120mubancom = scriptfunction aaa(obj){parent.qq(obj);}\/scriptscript src=htt

随机推荐

  1. HTML图片热区map area谷歌浏览器Google去除边框

    HTML图片热区map area去除边框默认的情况下 在Google浏览器中打开的时候周围会有蓝色的边框。 在area中加入以下代码可以去除边框: hidefocus=true onfocus=this.blur(); 完整代码如下: 复制代码 代码如下: img src=http://www.120muban.com/statics/images/l

  2. 空间绑定多个域名 添加统计代码的方法

    医疗建站中很多时候我们会在一个空间上绑定多个域名，但是希望给每个域名单独添加统计代码，下面医疗模板库www.120muban.com为大家带来实现这种需求的方法。 其实只需要通过JS来判断当前的网页域名，根据域名的不同输出不同的统计代码即可； 复制代码 代码如

  3. QQ添加好友代码

    QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a

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

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

  5. 最新获取访客QQ接口—20140915

    最新获取访客QQ接口,分析某网站代码得到的最新获取访客QQ的接口，接口地址： http://x.pet.qq.com/vip_platform?cmd=entercallback=aaa 复制代码 代码如下: script window.www120mubancom = scriptfunction aaa(obj){parent.qq(obj);}\/scriptscript src=htt