js操作textarea 常用方法总结


Posted in Javascript onDecember 03, 2012

在DOM里面操作textarea里面的字符,是比较麻烦的。
于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。
注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美。如果有高手也研究过,麻烦指点下。

var TT = { 
/* 
* 获取光标位置 
* @Method getCursorPosition 
* @param t element 
* @return number 
*/ 
getCursorPosition: function(t){ 
if (document.selection) { 
t.focus(); 
var ds = document.selection; 
var range = ds.createRange(); 
var stored_range = range.duplicate(); 
stored_range.moveToElementText(t); 
stored_range.setEndPoint("EndToEnd", range); 
t.selectionStart = stored_range.text.length - range.text.length; 
t.selectionEnd = t.selectionStart + range.text.length; 
return t.selectionStart; 
} else return t.selectionStart 
}, 
/* 
* 设置光标位置 
* @Method setCursorPosition 
* @param t element 
* @param p number 
* @return 
*/ 
setCursorPosition:function(t, p){ 
this.sel(t,p,p); 
}, 
/* 
* 插入到光标后面 
* @Method add 
* @param t element 
* @param txt String 
* @return 
*/ 
add:function (t, txt){ 
var val = t.value; 
if(document.selection){ 
t.focus() 
document.selection.createRange().text = txt; 
} else { 
var cp = t.selectionStart; 
var ubbLength = t.value.length; 
var s = t.scrollTop; 
// document.getElementById('aaa').innerHTML += s + '<br/>'; 
t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength); 
this.setCursorPosition(t, cp + txt.length); 
// document.getElementById('aaa').innerHTML += t.scrollTop + '<br/>'; 
firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){ 
if(t.scrollTop != s) t.scrollTop=s; 
},0) 
}; 
}, 
/* 
* 删除光标 前面或者后面的 n 个字符 
* @Method del 
* @param t element 
* @param n number n>0 后面 n<0 前面 
* @return 
* 重新设置 value 的时候 scrollTop 的值会被清0 
*/ 
del:function(t, n){ 
var p = this.getCursorPosition(t); 
var s = t.scrollTop; 
var val = t.value; 
t.value = n > 0 ? val.slice(0, p - n) + val.slice(p): 
val.slice(0, p) + val.slice(p - n); 
this.setCursorPosition(t ,p - (n < 0 ? 0 : n)); 
firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){ 
if(t.scrollTop != s) t.scrollTop=s; 
},10) 
}, 
/* 
* 选中 s 到 z 位置的文字 
* @Method sel 
* @param t element 
* @param s number 
* @param z number 
* @return 
*/ 
sel:function(t, s, z){ 
if(document.selection){ 
var range = t.createTextRange(); 
range.moveEnd('character', -t.value.length); 
range.moveEnd('character', z); 
range.moveStart('character', s); 
range.select(); 
}else{ 
t.setSelectionRange(s,z); 
t.focus(); 
} 
}, 
/* 
* 选中一个字符串 
* @Method sel 
* @param t element 
* @param s String 
* @return 
*/ 
selString:function(t, s){ 
var index = t.value.indexOf(s); 
index != -1 ? this.sel(t, index, index + s.length) : false; 
} 
}
Javascript 相关文章推荐
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
You might like
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python中的时区问题
2021/01/14 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
国税会议欢迎词
2014/01/16 职场文书
六五普法规划实施方案
2014/03/21 职场文书
竞选部长演讲稿
2014/04/26 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
防汛通知
2015/04/25 职场文书
独生子女证明范本
2015/06/19 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技