textraex 失焦

淩亂°似流年 2022-06-04 09:55 227阅读 0赞

**效果图：**

![SouthEast][]

![SouthEast 1][]

![SouthEast 2][]

**具体实现：**

1、textarea标签内容

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****span** style="font-size:14px;"**>****<****tr****>**  
2.      **<****td** align="right" valign="top"**>**备注：**</****td****>**  
3.      **<****td****>****<****textarea** name="" id="remark" cols="" rows="" class="textarea220" onfocus="this.className='textarea220L';this.οnmοuseοut='';getAddFocus('remark');" onblur="this.className='textarea220';this.οnmοuseοut=function()\{this.className='textarea220'\};lostAddFocus('remark');" onmousemove="this.className='textarea220Lg'" onmouseout="this.className='textarea220'"**>****</****textarea****>****</****td****>**  
4.  **</****tr****>****</****span****>**

2、初始化使点击添加按钮时，内容显示最多能输入50个字

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  <span style="font-size:14px;">$("\#introduction").val("最多能输入50个字");  
2.  document.getElementById("introduction").style.color="gray";</span>

3、js脚本

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  <span style="font-size:14px;">**function** getAddFocus(id)\{ //针对添加操作中的简介和备注，textarea获得焦点清空输入框  
2.      **var** textarea=document.getElementById(id);  
3.      textarea.value="";  
4.      textarea.style.color="black";  
5.  \}  
6.        
7.  **function** lostAddFocus(id)\{ //针对添加操作中的简介和备注，textarea失去焦点且内容为空时，显示提示信息  
8.      **var** textarea=document.getElementById(id);  
9.      **var** textarea\_value=textarea.value;  
10.     **if**(textarea\_value=="")\{  
11.     textarea.value="最多能输入50个字";  
12.     textarea.style.color="gray";  
13.     \}  
14. \}</span>

***csdn小伙伴写的textarea焦点的用法参考***：

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****span** style="font-size:14px;"**>**    1.文本框显示默认文字：    
2.          
3.      **<****textarea****>**白鸽男孩**</****textarea****>**     
4.      **<****textarea****>**白鸽男孩**</****textarea****>**    
5.      　　2.鼠标点击文本框，默认文字消失：    
6.          
7.      **<****textarea** onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}”**>**白鸽男孩**</****textarea****>**     
8.      **<****textarea** onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}”**>**白鸽男孩**</****textarea****>**    
9.      　　3.鼠标移至文本框，默认文字消失：    
10.         
11.     **<****textarea** onmouseover=”focus()” onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}”**>**白鸽男孩**</****textarea****>**     
12.     **<****textarea** onmouseover=”focus()” onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}”**>**白鸽男孩**</****textarea****>**    
13.     　　4.鼠标点击文本框，默认文字消失，点击文本框外任意区域，默认文字又重现：    
14.         
15.     **<****textarea** onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}” onblur=”if(value==’ ‘) \{ value=’白鸽男孩’\}”**>**白鸽男孩**</****textarea****>**     
16.     **<****textarea** onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}” onblur=”if(value==’ ‘) \{ value=’白鸽男孩’\}”**>**白鸽男孩**</****textarea****>**    
17.     　　5.鼠标移至文本框，默认文字消失，鼠标移出文本框，默认文字又重现：    
18.         
19.     **<****textarea** onmouseover=”focus()” onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}” onmouseout=”blur()” onblur=”if (value==’ ‘) \{ value=’白鸽男孩’\}”**>**白鸽男孩**</****textarea****>**     
20.     **<****textarea** onmouseover=”focus()” onfocus=”if(value==’白鸽男孩’) \{ value=’ ‘\}” onmouseout=”blur()” onblur=”if (value==’ ‘) \{ value=’白鸽男孩’\}”**>**白鸽男孩**</****textarea****>**    
21.     　　6.鼠标单击文本框，文本框内任何文字消失（包括默认文字及后来输入的文字）：    
22.         
23.     **<****textarea** onclick=”value=’ ‘”**>**白鸽男孩**</****textarea****>**     
24.     **<****textarea** onclick=”value=’ ‘”**>**白鸽男孩**</****textarea****>**    
25.     　　7.鼠标移至文本框，文本框内任何文字消失（包括默认文字及后来输入的文字）：    
26.         
27.     **<****textarea** onmouseover=”value=’ ‘”**>**白鸽男孩**</****textarea****>**     
28.     **<****textarea** onmouseover=”value=’ ‘”**>**白鸽男孩**</****textarea****>**    
29.     　　8.单击文本框后全选文本框内的文字：    
30.         
31.     **<****textarea** onfocus=”select()”**>**白鸽男孩**</****textarea****>**     
32.     **<****textarea** onfocus=”select()”**>**白鸽男孩**</****textarea****>**    
33.     　　9.鼠标移至文本框全选文本框内的文字：    
34.         
35.     **<****textarea** onmouseover=”focus()” onfocus=”select()”**>**白鸽男孩**</****textarea****>**     
36.     **<****textarea** onmouseover=”focus()” onfocus=”select()”**>**白鸽男孩**</****textarea****>**    
37.     　　10.回车后焦点从当前文本框转移到下一个文本框：    
38.         
39.     **<****textarea** onkeydown=”if(event.keyCode==13)event.keyCode=9″**>**白鸽男孩**</****textarea****>**     
40.     **<****textarea** onkeydown=”if(event.keyCode==13)event.keyCode=9″**>**白鸽男孩**</****textarea****>**    
41.     　　11.回车后焦点从当前文本框转移到指定位置：    
42.         
43.     **<****textarea** onkeypress=”return focusNext(this,’指定位置的id名称’,event)”**>**白鸽男孩**</****textarea****>**  **</****span****>**  
44.

[SouthEast]: /images/20220604/dc9b6f1c936c43e9849046051c02ffb8.png
[SouthEast 1]: /images/20220604/193e08d6be39489d8b26a4c5613a2ae6.png
[SouthEast 2]: /images/20220604/487b435268264e0ba2022d3184f8733b.png
[view plain]: http://blog.csdn.net/b671900/article/details/26251921#