这篇文章主要介绍了 javascript 自动恢复文本框点击清除后的默认文本的实现方法,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例介绍了点击文本框清除默认文本离开再恢复的 js 实例代码,分享给大家供大家参考,具体内容如下
相关知识:
1、onclick 事件的定义和用法:
当点击对象的时候会触发此事件。
浏览器支持:
1)、IE 浏览器支持此事件。
2)、火狐浏览器支持此事件。
3)、Opera 浏览器支持此事件。
4)、谷歌浏览器支持此事件。
5)、safria 浏览器支持此事件。
实例代码:
- <html>
- <head>
- <meta charset="gb2312" />
- <title>
- phperz
- </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>
- phperz
- </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">
- <titlephperz</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" 密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。
来源: