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


Posted in Javascript onMay 19, 2014

效果图:
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>
Javascript 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
javascript使用location.search的示例
Nov 05 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
vue视频播放暂停代码
Nov 08 Javascript
js跨域访问示例(客户端/服务端)
May 19 #Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 #Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 #Javascript
jQuery filter函数使用方法
May 19 #Javascript
用js模拟struts2的多action调用示例
May 19 #Javascript
从零学JS之你需要了解的几本书
May 19 #Javascript
JavaScript在IE和FF下的兼容性问题
May 19 #Javascript
You might like
php discuz 主题表和回帖表的设计
2009/03/13 PHP
php explode函数实例代码
2012/02/27 PHP
解析php常用image图像函数集
2013/06/24 PHP
php将html转为图片的实现方法
2017/05/19 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PDO实现学生管理系统
2020/03/21 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python使用插值法画出平滑曲线
2018/12/15 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python编程中类与类的关系详解
2019/08/08 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书
消防安全责任书
2014/04/14 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
三年级学生期末评语
2014/12/26 职场文书
退货证明模板
2015/06/23 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
使用Django实现商城验证码模块的方法
2021/06/01 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python