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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
正则表达式基础与常用验证表达式
Jun 16 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实现的多彩标签效果代码分享
2014/08/21 PHP
关于php中一些字符串总结
2016/05/05 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
pycharm导入源码的具体步骤
2020/08/04 Python
xml有哪些解析技术?区别是什么
2016/04/26 面试题
高级Java程序员面试题
2016/06/23 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
机关职员工作检讨书
2014/10/23 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
女性健康讲座主持词
2015/07/04 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016继续教育研修日志
2015/11/13 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers