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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
JavaScript 应用类库代码
Jun 02 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
在JavaScript中实现链式调用的实现
Dec 24 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php 中的closure用法详解
2017/06/12 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python django生成迁移文件的实例
2019/08/31 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
艺术应用与设计个人的自我评价
2013/11/23 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014年残联工作总结
2014/11/21 职场文书
公司食堂管理制度
2015/08/05 职场文书
聘任通知书
2015/09/21 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python