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.