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 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
bootstrap table列和表头对不齐的解决方法
Jul 19 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP中的加密功能
2006/10/09 PHP
深入分析php之面向对象
2013/05/15 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php微信开发接入
2016/08/27 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
javascript里的条件判断
2007/02/27 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python字符串连接方式汇总
2014/08/21 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
详解django自定义中间件处理
2018/11/21 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python中格式化字符串的四种实现
2020/05/26 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
红色革命电影观后感
2015/06/18 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL