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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
js实现延迟加载的方法
Jun 24 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
官方推荐react-navigation的具体使用详解
May 08 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 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递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP培训要多少钱
2017/06/06 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
自我鉴定注意事项
2014/01/19 职场文书
写求职信有什么意义
2014/02/17 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
盗窃案辩护词
2015/05/21 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
总结Python使用过程中的bug
2021/06/18 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android