javascript自动恢复文本框点击清除后的默认文本
2016-01-12 00:00
639 查看
本文实例介绍了点击文本框清除默认文本离开再恢复的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"密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。
以上就是本文的全部内容,希望对大家的学习javascript程序设计有所帮助。
捕获input文本框内容改变事件的js代码
Javascript 文本框textarea高度随内容自适应增长收缩
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
JS判断文本框内容改变事件的简单实例
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
相关知识:
1、onclick事件的定义和用法:
当点击对象的时候会触发此事件。
浏览器支持:
1)、IE浏览器支持此事件。
2)、火狐浏览器支持此事件。
3)、Opera浏览器支持此事件。
4)、谷歌浏览器支持此事件。
5)、safria浏览器支持此事件。
实例代码:
<html> <head> <meta charset="gb2312"/> <title>脚本之家</title> <style type="text/css"> div{ width:100px; height:100px; background-color:red; } </style> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); mydiv.onclick=function(){ mydiv.style.backgroundColor="green"; } } </script> </head> <body> <div id="mydiv"></div> </body> </html>
以上代码为div注册onclick事件处理函数,当点击div的时候就会执行此处理函数将div的背景颜色设置为绿色。
2、onblur事件的定义和用法:
当指定对象失去焦点时就会触发此事件。
实例代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>脚本之家</title> <style type="text/css"> .mytest{ background-color:green; } </style> <script type="text/javascript"> window.onload=function(){ var username=document.getElementById("username"); username.focus(); username.onblur=function(){ username.style.backgroundColor="green"; } } </script> </head> <body> <input type="text" name="username" id="username" /> </body> </html>
以上代码为input元素的onblur事件绑定事件处理函数,当input元素失去焦点的时候,能够将背景颜色设置为绿色。
接下来是重中之重:点击文本框清除默认文本离开再恢复
很多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框。
代码如下:
<html> <head> <meta charset="gb2312"> <title>点击文本框清除默认值</title> <script type="text/javascript"> window.onload=function() { var username=document.getElementById("username"); username.onclick=function() { if(username.value=="请输入您的姓名") { username.value=""; this.focus(); } } username.onblur=function() { if(username.value=="") { username.value="请输入您的姓名"; } } } </script> </head> <body> <input type="text" value="请输入您的姓名" id="username" /> </body> </html>
以上代码实现了我们的要求,当点击文本框的时候能够清除文本框中的内容,如果文本框没有输入任何内容,这个时候鼠标焦点离开文本框的时候,会将文本框的值恢复到默认状态。不过如果密码框肯恩有点麻烦,因为密码框并非显示的明文,解决方案可以参考如何实现在密码框如出现提示语下段内容。
如何实现在密码框如出现提示语:
有时候我们需要在登陆表单有一些提示语言,比如“请输入用户民”和“请输入密码”等语言,至于用户名好说,但是在密码框中出现“请输入密码”这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的。所以就得想其他办法,代码如下:
<html> <head> <meta charset="gb2312"> <title脚本之家</title> <style type="text/css"> #tx{ width:100px; } #pwd{ display:none; width:100px; } </style> <script type="text/javascript"> window.onload=function(){ var tx=document.getElementById("tx"); var pwd=document.getElementById("pwd"); tx.onfocus=function(){ if(this.value!="密码") return; this.style.display="none"; pwd.style.display="block"; pwd.value=""; pwd.focus(); } pwd.onblur=function(){ if(this.value!=""){ return; } this.style.display="none"; tx.style.display=""; tx.value="密码"; } } </script> </head> <body> <input type="text" value="密码" id="tx"/> <input type="password" id="pwd" /> </body> </html>
以上代码实现了我们的要求,可以出现明码的提示,当输入密码的时候就是以密码方式输入。
实现的原理非常的简单,在默认状态以type="text"文本框显示,当点击文本框的时候,以type="password"密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。
以上就是本文的全部内容,希望对大家的学习javascript程序设计有所帮助。
您可能感兴趣的文章:
刷新时清空文本框内容的js代码捕获input文本框内容改变事件的js代码
Javascript 文本框textarea高度随内容自适应增长收缩
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
JS判断文本框内容改变事件的简单实例
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
相关文章推荐
- JavaScript实现输入框(密码框)出现提示语
- 学习JavaScript设计模式之策略模式
- 探析浏览器执行JavaScript脚本加载与代码执行顺序
- JavaScript继承模式粗探
- 基于JavaScript实现div层跟随滚动条滑动
- 轻松实现JavaScript图片切换
- 基于JavaScript实现TAB标签效果
- 学习JavaScript设计模式之代理模式
- js替换普通file控件
- 网上找到的js实现Map的方法
- 字符串转换
- javascript正则匹配
- 腾讯手机QQ兴趣部落使用的Abstract.js框架初探
- 10030---JavaScript中的匿名函数及函数的闭包
- 使用PhantomJS实现网页截图服务
- 什么是JSON数据
- JSP页面的语法元素
- JSON 标准化的过程: 人为的将不标准的JSON数据(最外层不是{}或者[]),转换成 标准的 JSON 数据.
- 怎么把plist文件转换成JSON 文件 ,在把JSON文件转换成字典或者数组
- 如何将phantomjs单独部署在服务端