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代码
Oct 30 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
Banner程序
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
js友好的时间返回函数
2016/08/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
js面向对象编程总结
2017/02/16 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python基于event实现线程间通信控制
2020/01/13 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python如何调用字典的key
2020/05/25 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
化工机械应届生求职信
2013/11/04 职场文书
施工人员岗位职责
2013/12/12 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
政协工作总结2015
2015/05/20 职场文书
小学中队委竞选稿
2015/11/20 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书