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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
layui use 定义js外部引用函数的方法
Sep 26 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新手上路(十一)
2006/10/09 PHP
php MySQL与分页效率
2008/06/04 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python字典简介以及用法详解
2016/11/15 Python
python非递归全排列实现方法
2017/04/10 Python
使用Python实现简单的服务器功能
2017/08/25 Python
单链表反转python实现代码示例
2018/02/08 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python requests模块session代码实例
2020/04/14 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
关于读书的活动方案
2014/08/14 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技