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判断手机号码座机号码函数，可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu

  2. JS邮箱验证函数

    JS邮箱验证函数。 关键代码： 复制代码 代码如下: function emailCheck(str){ return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(str); } 使用方法： emailCheck(邮箱); alert(emailCheck(10001

  3. JS禁止复制网站文章代码

    JS禁止复制网站文章代码，可以实现网页上的文本无法复制，在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码： 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond

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

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

  5. Bcastr3.0详细使用教程

    Bcastr 3.0 beta flash 通用的图片浏览器 bcastr3.0 beta 是一款通用的图片浏览器 可以用于各种新闻系统或者blog系统 .可以读取xml设置播放列表,自定义xml地址 .可以将图片地址直接写网页中直接,不需要xml .自动适应图片大小 .循环播放，自定义自动播放时间

随机推荐

  1. JS判断手机号码座机号码函数

    JS判断手机号码座机号码函数，可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu

  2. JS邮箱验证函数

    JS邮箱验证函数。 关键代码： 复制代码 代码如下: function emailCheck(str){ return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(str); } 使用方法： emailCheck(邮箱); alert(emailCheck(10001

  3. JS禁止复制网站文章代码

    JS禁止复制网站文章代码，可以实现网页上的文本无法复制，在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码： 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond

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

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

  5. Bcastr3.0详细使用教程

    Bcastr 3.0 beta flash 通用的图片浏览器 bcastr3.0 beta 是一款通用的图片浏览器 可以用于各种新闻系统或者blog系统 .可以读取xml设置播放列表,自定义xml地址 .可以将图片地址直接写网页中直接,不需要xml .自动适应图片大小 .循环播放，自定义自动播放时间