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 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
javascript实现放大镜功能
Dec 09 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
详解vue 命名视图
2019/08/14 Javascript
python字符串和常用数据结构知识总结
2019/05/21 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python continue语句实例用法
2020/02/06 Python
如何利用python进行时间序列分析
2020/08/04 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
类和结构的区别
2012/08/15 面试题
省三好学生申请材料
2014/01/22 职场文书
体育运动会广播稿
2014/10/05 职场文书
工作检讨书500字
2014/10/19 职场文书
公司年夜饭通知
2015/04/25 职场文书
《春酒》教学反思
2016/02/22 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle