Home > Developer > JavaScript
Javascript automatically restored text box click the default text after clearing, javascript text box
This article introduces the js instance code for clicking the text box to clear the default text and then restore it. The details are as follows:
Related Knowledge:
1. Definitions 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) operabrowser supports this event.
4) Google Chrome supports this event.
5) The safria browser supports this event.
Instance code:
<Html>The above code registers the onclick event handler function for the div. When you click the div, this handler is executed to set the background color of the div to green.
2. Definitions and usage of onblur events:
This event is triggered when the specified object loses focus.
Instance code:<Html>The above code is the onblur event binding event handler function of the input element. When the input element loses focus, the background color can be set to green.
Next is the top priority:Click the text box to clear the default text and then restore it.
The text boxes to be filled in by many websites provide a default prompt language by default. When you click this text box, you can clear the default text, when the input text is deleted and the focus leaves the text box, the default text is written into the text box.
The Code is as follows:<Html>The above Code meets our requirements. When you click the text box, you can clear the content in the text box. If no content is entered in the text box, when the mouse focus leaves the text box, the value of the text box is restored to the default state. However, if the password box Ken is a little troublesome, because the Password box is not displayed in plain text, you can refer to how to implement the following content in the password box as prompted.
How to implement a prompt in the password box:
Sometimes we need to have some prompt languages in the login form, such as "Please enter the user" and "Please enter the password, however, it is a bit difficult to enter a password in the password box, because the entered content in the password box is not displayed with an explicit 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 IE8 browsers. So you have to find another method. The Code is as follows:<Html>The above Code meets our requirements and prompts are displayed. When a password is entered, it is entered as a password.
The implementation principle is very simple. It is displayed in the type = "text" text box by default. When you click the text box, it is displayed in the type = "password" password box, the original text box is hidden, that is, a replacement is made.The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
