Js implementation form (textarea) Acquisition and focus usage

Js implementation form (textarea) Acquisition and focus usage

In js, onfocus, onblur, onmouseover, and so on will be used. jquery binds events. The following uses textarea as an example. If input is used, the value is written differently.

1. display the default text in the text box:

The Code is as follows:
<Textarea> front-end development-csswang </textarea>

2. Click the text box, and the default text disappears:

The Code is as follows:
<Textarea onfocus = "if (value = 'frontend development-csswang') {value =''} "> frontend development-csswang </textarea>

3. move the cursor to the text box, and the default text disappears:

The Code is as follows:
<Textarea onmouseover = "focus ()" onfocus = "if (value = 'frontend development-csswang') {value =''} "> front-end development-csswang </textarea>

4. Click the text box, and the default text disappears. Click any area outside the text box to reproduce the default text:

The Code is as follows:
<Textarea onfocus = "if (value = 'frontend development-csswang') {value =''} "onblur =" if (value = '') {value = 'frontend development-csswang'} "> frontend development-csswang </textarea>

5. Move the mouse to the text box. The default text disappears. Move the mouse out of the text box. The default text is displayed again:

The Code is as follows:
<Textarea onmouseover = "focus ()" onfocus = "if (value = 'frontend development-csswang') {value =''} "onmouseout =" blur () "onblur =" if (value = '') {value = 'frontend development-csswang'}"> frontend development-csswang </textarea>

6. Click the text box, and any text in the text box will disappear (including the default text and subsequent text ):

The Code is as follows:
<Textarea onclick = "value ='' "> front-end development-csswang </textarea>

7. move the cursor to the text box, and any text in the text box disappears (including the default text and subsequent text ):

The Code is as follows:
<Textarea onmouseover = "value ='' "> frontend development-csswang </textarea>

8. Click the text box and select all text in the text box:

The Code is as follows:
<Textarea onfocus = "select ()"> frontend development-csswang </textarea>

9. move the cursor to the text box and select all text in the text box:

The Code is as follows:
<Textarea onmouseover = "focus ()" onfocus = "select ()"> front-end development-csswang </textarea>

10. Press enter and move it from the current text box to the next text box:

The Code is as follows:
<Textarea onkeydown = "if (event. keyCode = 13) event. keyCode = 9"> front-end development-csswang </textarea>

11. Press enter and move the focus from the current text box to the specified position:

The Code is as follows:
Textarea onkeypress = "return focusNext (this, 'Id of the specified location', event)"> front-end development-csswang </textarea>

At last, although I sorted this place out, the default text disappears when I move the mouse to the text box and move the mouse out of the text box. The default text is displayed again. I strongly recommend that you do not use Method 5. Use the jquery method.

The Code is as follows:
(Function () {$ ("# q"). focus (function () {(this. value = 'Enter the project name ')? This. value = '': false}); $ (" # q "). blur (function () {(this. value = '')? This. value = 'Enter the project name ': false });}());

Instead of writing it in a form, you can directly bind the form input id with jquery and then perform operations. This is good for the concise page and seo optimization.