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简单的拖动效果实现原理及示例
Jul 26 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
vue3.0中setup使用(两种用法)
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
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
Gird事件机制初级读本
2007/03/10 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
js 作用域和变量详解
2017/02/16 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python八大排序算法速度实例对比
2017/12/06 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python返回数组/List长度的实例
2018/06/23 Python
查看keras的默认backend实现方式
2020/06/19 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
销售经理工作职责
2014/02/03 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python