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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
ext实现完整的登录代码
Aug 08 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
Vue进度条progressbar组件功能
Apr 17 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php网站地图生成类示例
2014/01/13 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python分割和拼接字符串
2013/11/01 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python如何绘制疫情图
2020/09/16 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
海南地接欢迎词
2014/01/14 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
学习十八大宣传标语
2014/10/09 职场文书
党组织结对共建协议书
2016/03/23 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python实现视频中添加音频工具详解
2021/12/06 Python