Usage of textarea focus to achieve focus clearing and loss of focus prompt effect_javascript skills

Rendering:

Specific implementation:

1. Textarea tag content

Copy code The code is as follows:

2. Initialization allows you to enter up to 50 characters when you click the add button.

Copy code The code is as follows:

$("#introduction").val("Can enter up to 50 characters");
document.getElementById("introduction").style.color="gray";

3. js script

Copy code The code is as follows:

function getAddFocus(id){//For the add operation Introduction and remarks in, textarea gets focus and clears the input box
var textarea=document.getElementById(id);
textarea.value="";
textarea.style.color="black";
}

function lostAddFocus(id){//For the introduction and remarks in the add operation, when the textarea loses focus and the content is empty, a prompt message is displayed
var textarea=document.getElementById(id);
var textarea_value=textarea.value;
if(textarea_value==""){
textarea.value="Can enter up to 50 characters";
textarea.style.color="gray" ;
}
}

Usage reference of textarea focus written by csdn partner:

Copy code The code is as follows:

1. The text box displays the default text:

White Pigeon Boy
White Pigeon Boy
　2. Click the mouse on the text box, and the default text disappears:

White Pigeon Boy
White Pigeon Boy< /textarea> <br>　3. Move the mouse to the text box and the default text disappears: <br><br><textarea onmouseover="focus()" onfocus="if(value=='White Pigeon Boy') {value =' '}">White Pigeon Boy
<br>　4. Click the text box with the mouse and the default text will disappear. Click on any area outside the text box and the default text will reappear: <br><br><textarea onfocus=”if( value=='White Pigeon Boy') {value=' '}" onblur="if(value==' ') {value='White Pigeon Boy'}">White Pigeon Boy
White Pigeon Boy
　5. Move the mouse to the text box, the default text disappears, move the mouse out of the text box, and the default text reappears:

White Pigeon Boy
White Pigeon Boy
　6. Click the mouse on the text box, and any text in the text box will disappear (including the default text and Text entered later):

White Pigeon Boy
白Pigeon Boy
　7. Move the mouse to the text box, and any text in the text box will disappear (including the default text and later entered text):

White Pigeon Boy
White Pigeon Boy
　8. Click the text box and select all text boxes Text inside:

White Pigeon Boy
White Pigeon Boy< /textarea> <br> 9. Move the mouse to the text box to select all the text in the text box: <br><br><textarea onmouseover=”focus()” onfocus=”select()”>White Pigeon Boy< ;/textarea> <br><textarea onmouseover=”focus()” onfocus=”select()”>White Pigeon Boy
　10. After pressing Enter, the focus shifts from the current text box to the next A text box:

White Pigeon Boy
White Pigeon Boy
　11. After pressing Enter, the focus shifts from the current text box to the specified position:

< ;textarea onkeypress="return focusNext(this,'id name of the specified location',event)">White Pigeon Boy