Home > Article > Web Front-end > JavaScript automatically restores the default text after clicking to clear the text box_javascript skills

JavaScript automatically restores the default text after clicking to clear the text box_javascript skills

WBOYOriginal: 2016-05-16 15:20:401392browse

The example in this article introduces the js example code of clicking on the text box to clear the default text, leave and then restore it. It is shared with everyone for your reference. The specific content is as follows

Related knowledge:

1. Definition and usage of onclick event:
This event is triggered when an object is clicked.
Browser support:
1), IE browser supports this event.
2) Firefox browser supports this event.
3). Opera browser supports this event.
4) Google Chrome supports this event.
5), Safria browser supports this event.
Example code:

<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>

The above code registers an onclick event handler for the div. When the div is clicked, this handler will be executed to set the background color of the div to green.

2. Definition and usage of onblur event:
This event is triggered when the specified object loses focus.
Example code:

<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>

The above code binds the event handler function to the onblur event of the input element. When the input element loses focus, the background color can be set to green.

The next step is the most important thing: Click the text box to clear the default text, leave and then restore it

The text boxes that need to be filled in on many websites will give a default prompt language by default. When the mouse clicks on this text box, the default text inside can be cleared. When the entered text is deleted and the focus leaves the text box Then write the default text into the text box.
The code is as follows:

<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>

The above code realizes our requirements. When the text box is clicked, the content in the text box can be cleared. If no content is entered in the text box, when the mouse focus leaves the text box at this time, the value of the text box will be restored. to the default state. However, if the password box is a bit troublesome, because the password box is not displayed in plain text, the solution can be found in the next paragraph on how to implement a prompt in the password box.

How to realize the prompt appears in the password box:
Sometimes we need to have some prompt language in the login form, such as "Please enter your user name" and "Please enter your password". As for the user name, it is easy to say, but "Please enter your password" appears in the password box. This kind of language is a bit troublesome, because the content entered in the password box will not be displayed in clear code. If the type attribute is dynamically controlled, there will be compatibility issues. If the input already exists in the page, the type attribute is read-only in IE8 and browsers below IE8. So I have to think of other ways. The code is as follows:

<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>

The above code realizes our requirements. A clear prompt can appear. When entering the password, it is entered in password mode.
The implementation principle is very simple. In the default state, the text box is displayed with type="text". When the text box is clicked, the password box with type="password" is displayed. The originally displayed text box is hidden, which means that a Just a replacement.

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the problem of jquery's selector under ie7 that causes append to fail_jqueryNext article：Solution to the problem of jquery's selector under ie7 that causes append to fail_jquery

See more

JavaScript automatically restores the default text after clicking to clear the text box_javascript skills

Related articles