js操作textarea 常用方法总结


Posted in Javascript onDecember 03, 2012

在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代码
Dec 28 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
You might like
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
javascript Excel操作知识点
2009/04/24 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python登录注册验证功能实现
2018/06/18 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python 经典数字滤波实例
2019/12/16 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Python实现微信表情包炸群功能
2021/01/28 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
C语言编程题
2015/03/09 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
高二地理教学反思
2014/01/24 职场文书
火锅店的活动方案
2014/08/15 职场文书
报效祖国演讲稿
2014/09/15 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
银行员工考核评语
2014/12/31 职场文书
求职推荐信范文
2015/03/27 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python