Of Stack

javascript Auto Restore text box click the clear default text

  • 2020-11-30 08:10:26
  • OfStack

This article introduces the js instance code that clears the default text by clicking the text box and then restores it. It will be Shared for your reference. The specific content is as follows

Related knowledge:

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


<html>
<head>
<meta charset="gb2312"/>
<title> The home of the script </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 the onclick event handler for div, which executes when you click div to set the background color of div to green.

2. Definition and usage of onblur Events:
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> The home of the script </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 is the onblur event binding event handler for the input element, which can set the background color to green when the input element loses focus.

Next, top of the list: click the text box to clear the default text and then resume

Many websites need to fill in the text box in the default state will be given a default prompt language, when the mouse click on the text box will be able to clear the default text inside, when the input text is deleted and the focus away from the text box when the default text will be written into the text box.
The code is as follows: 


<html>
<head>
<meta charset="gb2312">
<title> Click the text box to clear the default values </title>
<script type="text/javascript"> 
window.onload=function()
{
 var username=document.getElementById("username");
 username.onclick=function()
 {
 if(username.value==" Please enter your name ")
 {
 username.value="";
 this.focus();
 }
 }
 username.onblur=function()
 {
 if(username.value=="")
 {
 username.value=" Please enter your name ";
 }
 }
}
</script>
</head>
<body>
<input type="text" value=" Please enter your name " id="username" />
</body>
</html>

The above code realizes our requirements. When clicking the text box, it can clear the content in the text box. If the text box does not enter any content, when the mouse focus leaves the text box, the value of the text box will be restored to the default state. However, if the password box Ken is a bit of a hassle because the password box is not shown in clear text, the solution is to see how to implement the following paragraph in the password box as the prompt appears.

How to realize the prompt in the password box:
Sometimes we need to have some prompts on the login form, such as "please enter user name" and "please enter password". As for the user name, it is easy to say, but "please enter password" in the password box is a little bit troublesome, because what is entered in the password box will not be shown in clear code. There is a compatibility issue if the type attribute is dynamically controlled. If input is already on the page, the type attribute is read-only in browsers below IE8 and IE8. So something else had to be done. Here's the code: 


<html> 
<head> 
<meta charset="gb2312"> 
<title The home of the script </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!=" password ") 
 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=" password "; 
 } 
}
</script> 
</head> 
<body> 
<input type="text" value=" password " id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

The above code to achieve our requirements, can appear clear code prompt, when the password is entered in password mode.
The implementation principle is very simple, in the default state as type="text" text box display, when clicking on the text box, type="password" password box display, the original display text box hidden, that is to say, made a replacement.

Above is the entire content of this article, I hope to help you learn javascript programming.

Related articles: