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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
js实现删除json中指定的元素
Sep 22 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
escape unescape的php下的实现方法
2007/04/27 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python容器类型公共方法总结
2020/08/19 Python
Python Merge函数原理及用法解析
2020/09/16 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
英语系本科生求职信
2014/07/15 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书