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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
layui 弹出删除确认界面的实例
Sep 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php 中英文语言转换类代码
2011/08/11 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
pandas 空数据处理方法详解
2019/11/02 Python
python 深度学习中的4种激活函数
2020/09/18 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
酒店员工职业生涯规划
2014/02/25 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
项目建议书怎么写
2014/05/15 职场文书
企业总经理任命书
2014/06/05 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
教师节标语大全
2014/10/07 职场文书
作弊检讨书
2015/01/27 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python