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为输入框的默认文本。
效果截图:
<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="请输入您的姓名" >
相关文章
- JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码,标题不间断自右向左滚动。 代码简单容易理解,加快或减慢滚动速度只需修改setInterval函数的时间参数即可,本效果默认时间间隔是400毫秒。
- input输入框默认文本点击清空,无输入显示效果
网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。 本例中还添加了在不同情况下文本框中的文本颜色不同的
- 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
- 使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
- jquery实现的tab切换
1、jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。下面跟大家分享一个jquery的tab切换 2、如何使用 调用jquery文件 script type=text/javascript src=jquery.js/script jquery实现ta
随机推荐
- JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码,标题不间断自右向左滚动。 代码简单容易理解,加快或减慢滚动速度只需修改setInterval函数的时间参数即可,本效果默认时间间隔是400毫秒。
- input输入框默认文本点击清空,无输入显示效果
网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。 本例中还添加了在不同情况下文本框中的文本颜色不同的
- 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
- 使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
- jquery实现的tab切换
1、jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。下面跟大家分享一个jquery的tab切换 2、如何使用 调用jquery文件 script type=text/javascript src=jquery.js/script jquery实现ta