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 each的几种常用的使用方法示例
Jan 21 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
Postman参数化实现过程及原理解析
Aug 13 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中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
requireJS使用指南
2016/04/27 Javascript
js实现文字截断功能
2016/09/14 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中random模块用法实例分析
2015/05/19 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python else语句在循环中的运用详解
2020/07/06 Python
python openssl模块安装及用法
2020/12/06 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
期终自我鉴定
2014/02/17 职场文书
开业典礼主持词
2014/03/21 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
大学生应聘求职信
2014/05/26 职场文书
校庆活动策划方案
2014/06/05 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
Oracle笔记
2021/04/05 Oracle