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 相关文章推荐
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
vue实现树形菜单效果
Mar 19 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
标准PHP的AES加密算法类
2015/03/12 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
班组长安全职责
2014/01/05 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
超市督导岗位职责
2015/04/10 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Golang流模式之grpc的四种数据流
2022/04/13 Golang