Reproduction image:
Specific implementation:
1. Textarea tag content
The code copy is as follows:
<span style="font-size:14px;"><tr>
<td align="right" valign="top">Note:</td>
<td><textarea name="" id="remark" cols="" rows="" onfocus="this.className='textarea220L';this.onmouseout='';getAddFocus('remark');" onblur="this.className='textarea220';this.onmouseout=function(){this.className='textarea220'};lostAddFocus('remark');" onmousemove="this.className='textarea220Lg'" onmouseout="this.className='textarea220'"></textarea></td>
</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>