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 程序库的比较(一)之DOM功能
Apr 07 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
javascript每日必学之继承
Feb 23 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
快速排序 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
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python爬虫常用的模块分析
2014/08/29 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
司机岗位职责
2013/11/15 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
医学类个人求职信范文
2014/02/05 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
公司年会策划方案
2014/05/17 职场文书
小学教师师德承诺书
2014/05/23 职场文书
学期个人自我总结
2015/02/13 职场文书
鲁冰花观后感
2015/06/10 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏