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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
用 JSON 处理缓存
Apr 27 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
js实现分页功能
2017/05/24 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
python迭代器实例简析
2014/09/25 Python
python操作CouchDB的方法
2014/10/08 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python使用functools实现注解同步方法
2018/02/06 Python
django2.0扩展用户字段示例
2019/02/13 Python
python装饰器常见使用方法分析
2019/06/26 Python
python如何输出反斜杠
2020/06/18 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
教师队伍管理制度
2014/01/14 职场文书
安全生产责任书范本
2014/04/15 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
高二英语教学反思
2016/03/03 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android