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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
JavaScript实现滚动加载更多
Dec 27 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
新浪新闻小偷
2006/10/09 PHP
php实现对象克隆的方法
2015/06/20 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
学习vue.js计算属性
2016/12/03 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
深入浅析Python代码规范性检测
2020/07/31 Python
RetroStage德国:复古服装
2019/02/03 全球购物
道路施工安全责任书
2014/07/24 职场文书
党员三严三实心得体会
2014/10/13 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
关于python类SortedList详解
2021/09/04 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python