JS implementation form (TEXTAREA) acquisition and focus of usage

Source: Internet
Author: User

In the JS will use onfocus and onblur, onmouseover and so on, jquery with event binding, and the following is to textarea for example, if the input is the value of different writing.

1. The text box displays the default text:

The code is as follows

<textarea> Front-End Development-csswang</textarea>

2. The mouse clicks the text box, the default text disappears:

The code is as follows

<textarea onfocus= "If" (value== ' Front-End development-csswang ') {value= '} ' > Front-End development-csswang</textarea>

3. Move mouse to text box, default text disappears:

The code is as follows


<textarea onmouseover= "focus ()" onfocus= "if (value== ' front-end development-csswang ') {value= '}" > Front-End development-csswang</textarea >

4. The mouse clicks the text box, the default text disappears, clicks any area outside the text box, the default text reappears again:

The code is as follows


<textarea onfocus= ' if (value== ' front-end development-csswang ') {value= '} ' onblur= ' if (value== ') {value= ' Front-End development-csswang '} ' > Front-End development-csswang</textarea>

5. Move mouse to text box, default text disappears, mouse moves out of text box, default text reappears again:

The code is as follows

<textarea onmouseover= "focus ()" onfocus= "if (value== ' front-end development-csswang ') {value= '}" onmouseout= "blur ()" Onblur= "if ( value== ') {value= ' Front-End development-csswang '} ' > Front-End development-csswang</textarea>

6. The mouse clicks the text box, any text in the text box disappears (includes the default text and the text that is entered later):

The code is as follows

<textarea onclick= "value=" "> Front-End development-csswang</textarea>

7. Mouse to the text box, text box any text disappears (including the default text and later entered text):

The code is as follows

<textarea onmouseover= "value=" "> Front-End development-csswang</textarea>

8. After clicking the text box, select the text in the full box:

The code is as follows

<textarea onfocus= "SELECT ()" > Front-End development-csswang</textarea>

9. Move the mouse to the text box in the Full selection text box:

The code is as follows

<textarea onmouseover= "focus ()" onfocus= "Select ()" > Front-End development-csswang</textarea>

10. Transfer from the current text box to the next text box after carriage return:

The code is as follows

<textarea onkeydown= "if (event.keycode==13) event.keycode=9" > Front-End development-csswang</textarea>

11. The focus is transferred from the current text box to the specified position after the carriage return:

The code is as follows

TextArea onkeypress= "Return Focusnext" [This, ' Specify Location ID name ', event] ' > Front-End development-csswang</textarea>

Finally, although I sorted this place, but for the mouse to move to the text box, the default text disappears, the mouse moved out of the text box, the default text reproduced this I strongly recommend do not use Method 5, available jquery method

The code is as follows

(function () {$ ("#q"). focus (function () {(this.value== ' Enter the name of the property ')? this.value= ': false} '; $ ("#q"). blur (function () {( this.value== ')? this.value= ' Please enter the property name ': false} '; }());

It is not written in the form, but directly using the jquery binding form input ID and then operation, for the page simplicity and SEO optimization are good.

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.