textarea焦点的用法(获取焦点清空,失去焦点提示)

4 篇文章 0 订阅

效果图:

具体实现:

1、textarea标签内容

<tr>
    <td align="right" valign="top">备注:</td>
    <td><textarea name="" id="remark" cols="" rows="" class="textarea220" οnfοcus="this.className='textarea220L';this.οnmοuseοut='';getAddFocus('remark');" οnblur="this.className='textarea220';this.οnmοuseοut=function(){this.className='textarea220'};lostAddFocus('remark');" οnmοusemοve="this.className='textarea220Lg'" οnmοuseοut="this.className='textarea220'"></textarea></td>
</tr>

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

$("#introduction").val("最多能输入50个字");
document.getElementById("introduction").style.color="gray";

3、js脚本

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";
    }
}

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

    1.文本框显示默认文字:  
      
    <textarea>白鸽男孩</textarea>   
    <textarea>白鸽男孩</textarea>  
      2.鼠标点击文本框,默认文字消失:  
      
    <textarea οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</textarea>   
    <textarea οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</textarea>  
      3.鼠标移至文本框,默认文字消失:  
      
    <textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</textarea>   
    <textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</textarea>  
      4.鼠标点击文本框,默认文字消失,点击文本框外任意区域,默认文字又重现:  
      
    <textarea οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}” οnblur=”if(value==’ ‘) {value=’白鸽男孩’}”>白鸽男孩</textarea>   
    <textarea οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}” οnblur=”if(value==’ ‘) {value=’白鸽男孩’}”>白鸽男孩</textarea>  
      5.鼠标移至文本框,默认文字消失,鼠标移出文本框,默认文字又重现:  
      
    <textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}” οnmοuseοut=”blur()” οnblur=”if (value==’ ‘) {value=’白鸽男孩’}”>白鸽男孩</textarea>   
    <textarea οnmοuseοver=”focus()” οnfοcus=”if(value==’白鸽男孩’) {value=’ ‘}” οnmοuseοut=”blur()” οnblur=”if (value==’ ‘) {value=’白鸽男孩’}”>白鸽男孩</textarea>  
      6.鼠标单击文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):  
      
    <textarea οnclick=”value=’ ‘”>白鸽男孩</textarea>   
    <textarea οnclick=”value=’ ‘”>白鸽男孩</textarea>  
      7.鼠标移至文本框,文本框内任何文字消失(包括默认文字及后来输入的文字):  
      
    <textarea οnmοuseοver=”value=’ ‘”>白鸽男孩</textarea>   
    <textarea οnmοuseοver=”value=’ ‘”>白鸽男孩</textarea>  
      8.单击文本框后全选文本框内的文字:  
      
    <textarea οnfοcus=”select()”>白鸽男孩</textarea>   
    <textarea οnfοcus=”select()”>白鸽男孩</textarea>  
      9.鼠标移至文本框全选文本框内的文字:  
      
    <textarea οnmοuseοver=”focus()” οnfοcus=”select()”>白鸽男孩</textarea>   
    <textarea οnmοuseοver=”focus()” οnfοcus=”select()”>白鸽男孩</textarea>  
      10.回车后焦点从当前文本框转移到下一个文本框:  
      
    <textarea οnkeydοwn=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>   
    <textarea οnkeydοwn=”if(event.keyCode==13)event.keyCode=9″>白鸽男孩</textarea>  
      11.回车后焦点从当前文本框转移到指定位置:  
      
    <textarea οnkeypress=”return focusNext(this,’指定位置的id名称’,event)”>白鸽男孩</textarea>  


  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
textarea失去焦点事件可以通过在HTML的textarea标签上添加onblur属性来实现。例如,可以使用以下代码来触发textarea失去焦点事件: <textarea onblur="myFunction()"></textarea> 在这个例子中,当textarea失去焦点时,会调用名为myFunction()的JavaScript函数。你可以根据自己的需求来定义这个函数的具体行为。引用提供了一个示例代码,其中textarea标签的onfocus属性设置为空,表示当textarea获得焦点时,placeholder属性会被清空。而onblur属性设置为this.placeholder='请填写',表示当textarea失去焦点时,如果textarea中没有填写任何内容,则显示"请填写"这个占位符。引用中的CSS样式可以用来设置textarea的宽度、字体、背景颜色和边框样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [textarea焦点用法实现获取焦点清空失去焦点提示效果](https://download.csdn.net/download/weixin_38720322/13589726)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [JS:文本框失去焦点事件、获得焦点事件](https://blog.csdn.net/sea1216/article/details/76698181)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [input和textarea失去焦点时placeholder消失,获取焦点存在](https://blog.csdn.net/weixin_46113850/article/details/107915515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值