Usage of textarea focus to achieve the effect of obtaining focus clearing and losing focus prompts

Author：Eve Cole Update Time：2025-08-20 21:32:01

Reproduction image:

Specific implementation:

1. Textarea tag content

The code copy is as follows:

</tr></span>

2. Initialization allows you to enter up to 50 words when clicking the Add button.

The code copy is as follows:

<span style="font-size:14px;">$("#introduction").val("Maximum 50 words can be entered");

document.getElementById("introduction").style.color="gray";</span>

3. js script

The code copy is as follows:

<span style="font-size:14px;">function getAddFocus(id){//For the introduction and notes in the addition operation, textarea gets focus clear input box

var textarea=document.getElementById(id);

textarea.value="";

textarea.style.color="black";

}

function lostAddFocus(id){//For the introduction and notes in the addition operation, if the textarea loses focus and the content is empty, the prompt message will be displayed

var textarea=document.getElementById(id);

var textarea_value=textarea.value;

if(textarea_value==""){

textarea.value="Maximum 50 words can be entered";

textarea.style.color="gray";

}

}</span>

Reference for the usage of textarea focus written by csdn friends:

The code copy is as follows:

<span style="font-size:14px;"> 1. The text box displays the default text:

<textarea>White Dove Boy</textarea>

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

<textarea onfocus=”if(value=='White Dove Boy') {value=' '}">White Dove Boy</textarea>

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

<textarea onmouseover=”focus()” onfocus=”if(value=='White Dove Boy') {value=' '}">White Dove Boy</textarea>

4. Click the text box with the mouse, the default text disappears, click any area outside the text box, and the default text reappears again:

<textarea onfocus=”if(value=='White Dove Boy') {value=' '}" onblur="if(value==' ') {value='White Dove Boy'}">White Dove Boy</textarea>

5. Move the mouse to the text box, the default text disappears, the mouse to move out of the text box, and the default text reappears:

<textarea onmouseover=”focus()” onfocus=”if(value=='White Dove Boy') {value=' '}" onmouseout="blur()" onblur="if (value==' ' ') {value='White Dove Boy'}">White Dove Boy</textarea>

6. Click the text box with the mouse, and any text in the text box disappears (including the default text and the text entered later):

<textarea onclick=”value=’ '”>White Dove Boy</textarea>

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

<textarea onmouseover=”value=’ '”>White Dove Boy</textarea>

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

<textarea onfocus="select()">White Dove Boy</textarea>

9. Move the mouse to the text box and select all text in the text box:

<textarea onmouseover=”focus()” onfocus=”select()”>White Dove Boy</textarea>

10. After entering, the focus will be transferred from the current text box to the next text box:

<textarea onkeydown=”if(event.keyCode==13)event.keyCode=9″>White Dove Boy</textarea>

11. After entering, the focus will be transferred from the current text box to the specified position:

<textarea onkeypress="return focusNext(this,'specified location id name',event)">White Dove Boy</textarea> </span>