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移动div层-javascript 拖动层
Mar 22 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
详解vue高级特性
Jun 09 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python制作一个桌面便签软件
2015/08/09 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
师范生个人推荐信
2013/11/29 职场文书
自荐信的基本格式
2014/02/22 职场文书
论文评语大全
2014/04/29 职场文书
2015最新民情日记范文
2015/06/26 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书