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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
Vue.js表单控件实践
Oct 27 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
Vue3.x源码调试的实现方法
2019/10/13 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中enumerate函数代码解析
2017/10/31 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python自动创建Excel并获取内容
2020/09/16 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
门卫岗位安全职责
2013/12/13 职场文书
人事专员岗位说明书
2014/07/29 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript