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实现的网页颜色代码表全集
Jul 17 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 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
PHP 采集程序 常用函数
2008/12/18 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
js闭包用法实例详解
2016/12/13 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python getpass实现密文实例详解
2019/09/24 Python
Python学习之os模块及用法
2020/06/03 Python
虚拟机下载python是否需要联网
2020/07/27 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
个人作风剖析材料
2014/02/02 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Redis实现分布式锁的五种方法详解
2022/06/14 Redis