Effect Chart:
Specific implementation:
1, TEXTAREA label content
Copy Code code as follows:
<span style= "FONT-SIZE:14PX;" ><tr>
<TD align= "right" valign= "top" > Remarks:</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, initialization so that click the Add button, content display can enter up to 50 words
Copy Code code as follows:
<span style= "FONT-SIZE:14PX;" >$ ("#introduction"). Val ("can enter up to 50 words");
document.getElementById ("Introduction"). Style.color= "Gray";</span>
3. js Script
Copy Code code as follows:
<span style= "FONT-SIZE:14PX;" >function Getaddfocus (ID) {//For the introduction and comments in the add operation, textarea get focus empty 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, display the message when textarea loses focus and the content is empty
var Textarea=document.getelementbyid (ID);
var Textarea_value=textarea.value;
if (textarea_value== "") {
Textarea.value= "can enter a maximum of 50 words";
Textarea.style.color= "Gray";
}
}</span>
Csdn the use of textarea focus by small partners:
Copy Code code as follows:
<span style= "FONT-SIZE:14PX;" > 1. Text box displays default text:
<textarea> Dove Boy </textarea>
<textarea> Dove Boy </textarea>
2. The mouse clicks 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. Move mouse to text box, default text disappears:
<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. The mouse clicks the text box, the default text disappears, clicks any area outside the text box, the default text reappears again:
<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. Move mouse to text box, default text disappears, mouse moves out of text box, default text reappears 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. The mouse clicks the text box, any text in the text box disappears (includes the default text and the text that is entered later):
<textarea onclick= "value=" "> Dove Boy </textarea>
<textarea onclick= "value=" "> Dove Boy </textarea>
7. Mouse to the text box, text box any text disappears (including the default text and later entered text):
<textarea onmouseover= "value=" "> Dove Boy </textarea>
<textarea onmouseover= "value=" "> Dove Boy </textarea>
8. After clicking the text box, select the text in the full box:
<textarea onfocus= "SELECT ()" > White Dove Boy </textarea>
<textarea onfocus= "SELECT ()" > White Dove Boy </textarea>
9. Move the mouse to the text box in the Full selection text box:
<textarea onmouseover= "focus ()" onfocus= "Select ()" > White Dove Boy </textarea>
<textarea onmouseover= "focus ()" onfocus= "Select ()" > White Dove Boy </textarea>
10. Transfer focus from the current text box to the next text box:
<textarea onkeydown= "if (event.keycode==13) event.keycode=9″> Pigeon Boy </textarea>
<textarea onkeydown= "if (event.keycode==13) event.keycode=9″> Pigeon Boy </textarea>
11. The focus is transferred from the current text box to the specified position after the carriage return:
<textarea onkeypress= "Return Focusnext" [This, ' Specify Location ID name ', event] ' > Dove boy </textarea> </span>
