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 相关文章推荐
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
JS实现盒子拖拽效果
Feb 06 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编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
js a标签点击事件
2017/03/30 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python指定写入文件时的编码格式方法
2018/06/07 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis