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文本域字符个数的具体实现
Aug 02 Javascript
js中生成map对象的方法
Jan 09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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
PHP中include()与require()的区别说明
2017/02/14 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python爬虫与反爬虫大战
2020/07/30 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
初中信息技术教学反思
2016/02/16 职场文书
python中的getter与setter你了解吗
2022/03/24 Python