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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
jquery实现动态画圆
Dec 04 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
ES6学习教程之Promise用法详解
Nov 22 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/07/28 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
js的各种数据类型判断的介绍
2019/01/19 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python面向对象编程基础实例分析
2020/01/17 Python
解决python replace函数替换无效问题
2020/01/18 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
自荐信格式范文
2013/10/07 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
会议邀请书范文
2014/02/02 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
消防安全标语
2014/06/07 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
邀请书模板
2015/02/02 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
python装饰器代码解析
2022/03/23 Python