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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
原生js实现购物车
Sep 23 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
smarty内置函数section的用法
2015/01/22 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Python中生成ndarray实例讲解
2021/02/22 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
物理教师自荐信范文
2013/12/28 职场文书
《春天来了》教学反思
2014/04/07 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL