JavaScript Automatic recovery text box Click to clear the default text after _javascript tips

Source: Internet
Author: User

The example of this article describes the click of the text box to clear the default text to leave the back of the JS instance code, share for everyone to reference, the specific content as follows

Related knowledge:

1, the OnClick event definition and usage:
This event is triggered when the object is clicked.
Browser support:
1), IE browser support this event.
2), Firefox browser support this event.
3), opera browser support this event.
4), Google browser support this event.
5), Safria browser support this event.
Instance code:

 
 

The above code for the DIV registration onclick event handler function, when the click Div will perform this handler function to set the div background color to green.

2, the definition and use of onblur events:
This event is triggered when the specified object loses focus.
Instance code:

 
 

The code above is the onblur event-binding event handler for the INPUT element, which sets the background color to green when the input element loses focus.

Next is the most important: Click the text box to clear the default text to leave and then restore

Many web sites need to fill out the text box in the default state will give a default language, when the mouse clicks the text box can be the inside of the default text to clear, when the text is deleted and the focus left the text box when the default text to the text box.
The code is as follows:

 
 

The above code implements our request, when clicks the text box to be able to clear the text box the content, if the text box does not enter any content, this time the mouse focus leaves the text box, will return the text box value to the default state. But if the Password box Ken is a bit troublesome because the password box is not shown in plaintext, the solution can refer to how to implement the contents of the prompt in the Password box if it appears.

How to implement in a password box such as prompt:
Sometimes we need to be in the landing form some hint language, such as "Please enter the user" and "Please enter the password" and other languages, as for the user name say, However, a language such as "Enter a password" appears in the Password box, which is a bit of a hassle because the input in the password box is not displayed in plaintext. If you have a compatibility problem with dynamic control of the type attribute, if input already exists on the page, the Type property is read-only in the IE8 and IE8 browsers below. So you have to think of another way, the code is as follows:

 
 

The above code to achieve our requirements, you can appear in the hint of plaintext, when the password is entered in the password mode.
The principle of implementation is very simple, in the default state with the type= "text" box display, when clicked text box, with the type= "Password" password box display, the original display of the text box hidden, that is, made a replacement.

The above is the entire content of this article, I hope that the learning of JavaScript programming help.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.