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点击页面出现赞效果,点击页面任何地方出现随机的数字向上漂浮效果,挺炫的一种效果。 完整代码: 复制代码 代码如下: script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script script jQuery(document).ready(function($) { $(html,body).click(

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

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

  3. 网站新信息标题闪烁效果实现

    网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:

  4. JS强制弹出QQ对话框

    JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413

  5. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图:

随机推荐

  1. JS点击页面出现赞效果

    JS点击页面出现赞效果,点击页面任何地方出现随机的数字向上漂浮效果,挺炫的一种效果。 完整代码: 复制代码 代码如下: script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script script jQuery(document).ready(function($) { $(html,body).click(

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

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

  3. 网站新信息标题闪烁效果实现

    网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:

  4. JS强制弹出QQ对话框

    JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413

  5. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图: