textarea焦点的用法实现获取焦点清空失去焦点提示效果

 更新时间:2014年05月19日 17:10:57   作者:  
这篇文章主要介绍了textarea焦点的用法实现获取焦点清空失去焦点提示效果,需要的朋友可以参考下
效果图:

具体实现:

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>

相关文章

  • 跨域浏览器设置解决前端跨域问题

    跨域浏览器设置解决前端跨域问题

    这篇文章主要为大家介绍了前端跨域浏览器设置解决前端跨域问题的方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 移动端图片上传旋转、压缩问题的方法

    移动端图片上传旋转、压缩问题的方法

    在本篇文章中我们给大家分享了关于移动端图片上传旋转、压缩问题的解决方法,有需要的朋友们参考下
    2018-10-10
  • JS中arguments的使用示例

    JS中arguments的使用示例

    本文主要介绍了JS中arguments的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    本文介绍一个简单可行的办法,来做基于gulp构建的中小型项目中的seajs合并压缩,感兴趣的朋友一起看看详情吧
    2016-06-06
  • javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

    javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

    这篇文章主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下
    2015-05-05
  • JS实现判断移动端PC端功能

    JS实现判断移动端PC端功能

    这篇文章主要介绍了JS实现判断移动端PC端功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript仿windows计算器功能

    JavaScript仿windows计算器功能

    这篇文章主要为大家详细介绍了JavaScript仿windows计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS实现点击网页判断是否安装app并打开否则跳转app store

    JS实现点击网页判断是否安装app并打开否则跳转app store

    这篇文章主要介绍了JS实现点击网页判断是否安装app并打开否则跳转app store的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 详解JavaScript的函数简介

    详解JavaScript的函数简介

    这篇文章主要为大家介绍了JavaScript的函数简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • JS中准确判断变量类型的方法

    JS中准确判断变量类型的方法

    这篇文章主要介绍了在js中如何准确的判断一个变量的类型,文中代码非常详细,帮助大家更好的学习,有兴趣的朋友可以了解下
    2020-06-06

最新评论