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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
javascript实现拖放效果
Dec 16 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
js实现磁性吸附的示例
Oct 26 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
python 操作excel表格的方法
2020/12/05 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
红色故事汇观后感
2015/06/18 职场文书
2016十一国庆节感言
2015/12/09 职场文书
python套接字socket通信
2022/04/01 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python