视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
textarea焦点的用法实现获取焦点清空失去焦点提示效果_javascript技巧
2020-11-27 21:23:26 责编:小采
文档
 效果图:

具体实现:

1、textarea标签内容

代码如下:


<span style="font-size:14px;"><tr>
<td align="right" valign="top">备注:</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、初始化使点击添加按钮时,内容显示最多能输入50个字

代码如下:


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


3、js脚本

代码如下:


<span style="font-size:14px;">function getAddFocus(id){//针对添加操作中的简介和备注,textarea获得焦点清空输入框
var textarea=document.getElementById(id);
textarea.value="";
textarea.style.color="black";
}

function lostAddFocus(id){//针对添加操作中的简介和备注,textarea失去焦点且内容为空时,显示提示信息
var textarea=document.getElementById(id);
var textarea_value=textarea.value;
if(textarea_value==""){
textarea.value="最多能输入50个字";
textarea.style.color="gray";
}
}</span>


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

代码如下:


<span style="font-size:14px;"> 1.文本框显示默认文字:

<textarea>白鸽男孩</textarea>
<textarea>白鸽男孩</textarea>
  2.鼠标点击文本框,默认文字消失:

<textarea onfocus=”if(value=='白鸽男孩') {value=' ‘}”>白鸽男孩</textarea>
<textarea onfocus=”if(value=='白鸽男孩') {value=' ‘}”>白鸽男孩</textarea>
  3.鼠标移至文本框,默认文字消失:

<textarea onmouseover=”focus()” onfocus=”if(value=='白鸽男孩') {value=' ‘}”>白鸽男孩</textarea>
<textarea onmouseover=”focus()” onfocus=”if(value=='白鸽男孩') {value=' ‘}”>白鸽男孩</textarea>
  4.鼠标点击文本框,默认文字消失,点击文本框外任意区域,默认文字又重现:

<textarea onfocus=”if(value=='白鸽男孩') {value=' ‘}” onblur=”if(value==' ‘) {value='白鸽男孩'}”>白鸽男孩</textarea>
<textarea onfocus=”if(value=='白鸽男孩') {value=' ‘}” onblur=”if(value==' ‘) {value='白鸽男孩'}”>白鸽男孩</textarea>
  5.鼠标移至文本框,默认文字消失,鼠标移出文本框,默认文字又重现:

<textarea onmouseover=”focus()” onfocus=”if(value=='白鸽男孩') {value=' ‘}” onmouseout=”blur()” onblur=”if (value==' ‘) {value='白鸽男孩'}”>白鸽男孩</textarea>
<textarea onmouseover=”focus()” onfocus=”if(value=='白鸽男孩') {value=' ‘}” onmouseout=”blur()” onblur=”if (value==' ‘) {value='白鸽男孩'}”>白鸽男孩</textarea>
  6.鼠标单击文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):

<textarea onclick=”value=' ‘”>白鸽男孩</textarea>
<textarea onclick=”value=' ‘”>白鸽男孩</textarea>
  7.鼠标移至文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):

<textarea onmouseover=”value=' ‘”>白鸽男孩</textarea>
<textarea onmouseover=”value=' ‘”>白鸽男孩</textarea>
  8.单击文本框后全选文本框内的文字:

<textarea onfocus=”select()”>白鸽男孩</textarea>
<textarea onfocus=”select()”>白鸽男孩</textarea>
  9.鼠标移至文本框全选文本框内的文字:

<textarea onmouseover=”focus()” onfocus=”select()”>白鸽男孩</textarea>
<textarea onmouseover=”focus()” onfocus=”select()”>白鸽男孩</textarea>
  10.回车后焦点从当前文本框转移到下一个文本框:

<textarea onkeydown=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>
<textarea onkeydown=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>
  11.回车后焦点从当前文本框转移到指定位置:

<textarea onkeypress=”return focusNext(this,'指定位置的id名称',event)”>白鸽男孩</textarea> </span>

下载本文
显示全文
专题