js操作textarea方法集合封装(兼容IE,firefox)


Posted in Javascript onFebruary 22, 2011

注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美。如果有高手也研究过,麻烦指点下。

完整测试代码:

<textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea>
<br />
<input onclick="alert(TT.getCursorPosition(test))" type="button" value="光标位置" />
<input onclick="TT.setCursorPosition(test,3)" type="button" value="设置光标到3第位置" />
<input onclick="TT.add(test,'你好')" type="button" value="添加'你好'到光标后面" />
<input onclick="TT.del(test,2)" type="button" value="删除光标前2个字符" />
<input onclick="TT.del(test,-2)" type="button" value="删除光标后2个字符" />
<input onclick="TT.sel(test,0,2)" type="button" value="选中字符0-2的位置" />
<input onclick="TT.selString(test,'mno')" type="button" value="选中字符'mno'的位置" />
<script type="text/javascript">// <![CDATA[
var test = document.getElementById('testlujun');
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;
 }
}
// ]]></script>
Javascript 相关文章推荐
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
快速排序 php与javascript的不同之处
Feb 22 #Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 #Javascript
JavaScript中的排序算法代码
Feb 22 #Javascript
JavaScript中几种常见排序算法小结
Feb 22 #Javascript
用JS控制回车事件的代码
Feb 20 #Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 #Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 #Javascript
You might like
杏林同学录(七)
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python按照多个条件排序的方法
2019/02/08 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
写给老师的保证书
2015/05/09 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
52条SQL语句教你性能优化
2021/05/25 MySQL