js操作textarea 常用方法总结


Posted in Javascript onDecember 03, 2012

在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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
You might like
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP加密技术的简单实现
2016/09/04 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
js 颜色选择插件
2017/01/23 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
社团招新策划书
2014/02/04 职场文书
身边的榜样活动方案
2014/08/20 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2015年女职工工作总结
2015/05/15 职场文书
导游词之峨眉山
2019/12/16 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
Java 多线程并发FutureTask
2022/06/28 Java/Android