Effect:
Specific implementation:
1. Textarea label contents
<span style="font-size:14px;"><tr>
<td align="right" valign="top"> Remark: </td>
<td><textarea name="" id="remark" cols="" rows="" class="textarea220" 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. Initialize the content display to input up to 50 words when the add button is clicked
<span style="font-size:14px;">$("#introduction").val(" Maximum input 50 A word ");
document.getElementById("introduction").style.color="gray";</span>
3. Js script
<span style="font-size:14px;">function getAddFocus(id){//For the introduction and comments in the add operation, the textarea gets focus and clears the input box
var textarea=document.getElementById(id);
textarea.value="";
textarea.style.color="black";
}
function lostAddFocus(id){//When the textarea loses focus and the content is empty, a prompt is displayed for the introduction and remarks in the add operation
var textarea=document.getElementById(id);
var textarea_value=textarea.value;
if(textarea_value==""){
textarea.value=" Maximum input 50 A word ";
textarea.style.color="gray";
}
}</span>
The usage of textarea focus written by CSDN partner:
<span style="font-size:14px;"> 1. Text box displays default text:
<textarea> Dove boy </textarea>
<textarea> Dove boy </textarea>
2. Click the text box, the default text disappears:
<textarea onfocus= " if(value==' Dove boy ') {value=' ' } " > Dove boy </textarea>
<textarea onfocus= " if(value==' Dove boy ') {value=' ' } " > Dove boy </textarea>
3. Mouse over the text box, the default text disappeared:
<textarea onmouseover= " focus() " onfocus= " if(value==' Dove boy ') {value=' ' } " > Dove boy </textarea>
<textarea onmouseover= " focus() " onfocus= " if(value==' Dove boy ') {value=' ' } " > Dove boy </textarea>
4. Click the text box, the default text disappears, click any area outside the text box, the default text reappears:
<textarea onfocus= " if(value==' Dove boy ') {value=' ' } " onblur= " if(value==' ' ) {value=' Dove boy '} " > Dove boy </textarea>
<textarea onfocus= " if(value==' Dove boy ') {value=' ' } " onblur= " if(value==' ' ) {value=' Dove boy '} " > Dove boy </textarea>
5. Mouse over the text box, the default text disappeared, mouse over the text box, the default text again:
<textarea onmouseover= " focus() " onfocus= " if(value==' Dove boy ') {value=' ' } " onmouseout= " blur() " onblur= " if (value==' ' ) {value=' Dove boy '} " > Dove boy </textarea>
<textarea onmouseover= " focus() " onfocus= " if(value==' Dove boy ') {value=' ' } " onmouseout= " blur() " onblur= " if (value==' ' ) {value=' Dove boy '} " > Dove boy </textarea>
6. Click on the text box, any text in the text box disappeared (including the default text and later input text) :
<textarea onclick= " value=' '" > Dove boy </textarea>
<textarea onclick= " value=' '" > Dove boy </textarea>
7. Mouse over the text box, the text box any text disappeared (including the default text and later input text) :
<textarea onmouseover= " value=' '" > Dove boy </textarea>
<textarea onmouseover= " value=' '" > Dove boy </textarea>
8. After clicking the text box, select all the text in the text box:
<textarea onfocus= " select() " > Dove boy </textarea>
<textarea onfocus= " select() " > Dove boy </textarea>
9. Mouse over the text box all selected text box:
<textarea onmouseover= " focus() " onfocus= " select() " > Dove boy </textarea>
<textarea onmouseover= " focus() " onfocus= " select() " > Dove boy </textarea>
10. After hitting enter, the focus shifts from the current text box to the next text box:
<textarea onkeydown= " if(event.keyCode==13)event.keyCode=9 " > Dove boy </textarea>
<textarea onkeydown= " if(event.keyCode==13)event.keyCode=9 " > Dove boy </textarea>
11. After hitting enter, the focus shifts from the current text box to the specified location:
<textarea onkeypress= " return focusNext(this,' location-specific id The name of the ',event) " > Dove boy </textarea> </span>