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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
PyTorch中的C++扩展实现
2020/04/02 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
项目资料员岗位职责
2013/12/10 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
会计专业自荐信
2014/06/03 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
资产运营委托书范本
2014/10/16 职场文书
婚内分居协议书范文
2014/11/26 职场文书
领导视察通讯稿
2015/07/18 职场文书
关于远足的感想
2015/08/10 职场文书
2016小学新学期寄语
2015/12/04 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript