视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript自动恢复文本框点击清除后的默认文本_javascript技巧
2020-11-27 21:48:35 责编:小采
文档


本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下

相关知识:

1、onclick事件的定义和用法:
当点击对象的时候会触发此事件。
浏览器支持:
1)、IE浏览器支持此事件。
2)、火狐浏览器支持此事件。
3)、Opera浏览器支持此事件。
4)、谷歌浏览器支持此事件。
5)、safria浏览器支持此事件。
实例代码:




脚本之家

以上代码为div注册onclick事件处理函数,当点击div的时候就会执行此处理函数将div的背景颜色设置为绿色。

2、onblur事件的定义和用法:
当指定对象失去焦点时就会触发此事件。
实例代码:




脚本之家

以上代码为input元素的onblur事件绑定事件处理函数,当input元素失去焦点的时候,能够将背景颜色设置为绿色。

接下来是重中之重:点击文本框清除默认文本离开再恢复

很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框。
代码如下:




点击文本框清除默认值

以上代码实现了我们的要求,当点击文本框的时候能够清除文本框中的内容,如果文本框没有输入任何内容,这个时候鼠标焦点离开文本框的时候,会将文本框的值恢复到默认状态。不过如果密码框肯恩有点麻烦,因为密码框并非显示的明文,解决方案可以参考如何实现在密码框如出现提示语下段内容。

如何实现在密码框如出现提示语:
有时候我们需要在登陆表单有一些提示语言,比如“请输入用户民”和“请输入密码”等语言,至于用户名好说,但是在密码框中出现“请输入密码”这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的。所以就得想其他办法,代码如下:


 
 
 


以上代码实现了我们的要求,可以出现明码的提示,当输入密码的时候就是以密码方式输入。
实现的原理非常的简单,在默认状态以type="text"文本框显示,当点击文本框的时候,以type="password"密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。

下载本文
显示全文
专题