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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
Js 随机数产生6位数字
May 13 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
js 轮播效果实例分享
Dec 28 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
javascript实现评分功能
2020/06/24 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
水电工岗位职责
2015/02/14 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
用Python实现Newton插值法
2021/04/17 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android