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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript常用函数(1)
Nov 04 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 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如何利用P3P实现跨域
2013/08/24 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python中字典和集合学习小结
2017/07/07 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python 发送邮件方法总结
2020/08/10 Python
python使用建议与技巧分享(一)
2020/08/17 Python
如何利用python生成MD5并去重
2020/12/07 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
金融专业应届生求职信
2013/11/02 职场文书
门诊手术室工作制度
2014/01/30 职场文书
员工考核管理制度
2014/02/02 职场文书
大气污染防治方案
2014/05/19 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
教师自查自纠材料
2014/10/14 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL