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 模拟气泡屏保效果代码
Jul 10 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
使用js和canvas实现时钟效果
Sep 08 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保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python list删除元素时要注意的坑点分享
2018/04/18 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
高中政治教师教学反思
2016/02/23 职场文书