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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JS的数组的扩展实例代码
Jul 09 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
js数组常用最重要的方法
Feb 04 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
简述JS控制台的使用
2018/07/15 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python paramiko模块的使用示例
2018/04/11 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python数据爬下来保存的位置
2020/02/17 Python
python中shell执行知识点
2020/05/06 Python
如何学习Python time模块
2020/06/03 Python
python中最小二乘法详细讲解
2021/02/19 Python
三维科技面试题
2013/07/27 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
三好学生个人总结
2015/02/15 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python