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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
人大复印资料处理程序_查询篇
2006/10/09 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
JQuery筛选器全系列介绍
2013/08/27 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
python类参数self使用示例
2014/02/17 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python更改已存在excel文件的方法
2018/05/03 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
java字符串格式化输出实例讲解
2021/01/06 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
公司JAVA开发面试题
2015/04/02 面试题
销售会计岗位职责
2014/03/15 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
Pandas-DataFrame知识点汇总
2022/03/16 Python
德劲DE1105机评
2022/04/05 无线电