js封装的textarea操作方法集合(兼容很好)


Posted in Javascript onNovember 16, 2010

虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下。

在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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
JS实现带阴历的日历功能详解
Jan 24 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
详解JavaScript 的变量
Mar 08 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 #Javascript
div层的移动及性能优化
Nov 16 #Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
javascript Array对象基础知识小结
Nov 16 #Javascript
纯js实现背景图片切换效果代码
Nov 14 #Javascript
You might like
php实现ping
2006/10/09 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
django 外键创建注意事项说明
2020/05/20 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
业务助理岗位职责
2013/11/18 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis