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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
推荐文章系统(一)
2006/10/09 PHP
模仿OSO的论坛(四)
2006/10/09 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python2.7安装图文教程
2018/03/13 Python
numpy返回array中元素的index方法
2018/06/27 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python批量创建指定名称的文件夹
2019/03/21 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
2016年小学中秋节活动总结
2016/04/05 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers