Use of the textarea focus to get the focus clear lost focus prompt effect


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>