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 使用个人心得
Feb 26 Javascript
Prototype Class对象学习
Jul 19 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python IDLE入门简介
2017/12/08 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python+pygame实现坦克大战
2019/09/10 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
酒桌上的开场白
2015/06/01 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
apache ftpserver搭建ftp服务器
2022/05/20 Servers