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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
通过实例学习React中事件节流防抖
2019/06/17 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
班主任工作年限证明
2014/01/12 职场文书
超市中秋节活动方案
2014/02/12 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
领导新年致辞2016
2015/07/29 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
MySQL 计算连续登录天数
2022/05/11 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers