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判断手机端跳转代码 复制代码 代码如下: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(Trident) -1, //IE内核 Opera: u.indexOf(Opera) -1, //ope
- 阻止浏览器调试的代码
一段阻止浏览器调试的代码。
- 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
- JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码，标题不间断自右向左滚动。 代码简单容易理解，加快或减慢滚动速度只需修改setInterval函数的时间参数即可，本效果默认时间间隔是400毫秒。
- HTML图片热区map area谷歌浏览器Google去除边框
HTML图片热区map area去除边框默认的情况下 在Google浏览器中打开的时候周围会有蓝色的边框。 在area中加入以下代码可以去除边框: hidefocus=true onfocus=this.blur(); 完整代码如下: 复制代码 代码如下: img src=http://www.120muban.com/statics/images/l
随机推荐
- JS判断手机端跳转代码
JS判断手机端跳转代码 复制代码 代码如下: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(Trident) -1, //IE内核 Opera: u.indexOf(Opera) -1, //ope
- 阻止浏览器调试的代码
一段阻止浏览器调试的代码。
- 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
- JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码，标题不间断自右向左滚动。 代码简单容易理解，加快或减慢滚动速度只需修改setInterval函数的时间参数即可，本效果默认时间间隔是400毫秒。
- HTML图片热区map area谷歌浏览器Google去除边框
HTML图片热区map area去除边框默认的情况下 在Google浏览器中打开的时候周围会有蓝色的边框。 在area中加入以下代码可以去除边框: hidefocus=true onfocus=this.blur(); 完整代码如下: 复制代码 代码如下: img src=http://www.120muban.com/statics/images/l