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的闭包
Dec 31 Javascript
node.js实现端口转发
Apr 14 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
react 组件传值的三种方法
Jun 03 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
php获取mysql版本的几种方法小结
2008/03/25 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python实现祝福弹窗效果
2019/04/07 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
节约用电标语
2014/06/17 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
阿凡达观后感
2015/06/10 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python Pandas常用函数方法总结
2021/06/15 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL