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 相关文章推荐
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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/02/03 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP7 新增常量
2021/03/09 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
JS之相等操作符详解
2016/09/13 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
js实现微博发布小功能
2017/01/12 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
学校端午节活动方案
2014/08/23 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年资料员工作总结
2014/11/18 职场文书
检举信的写法
2019/04/10 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
Golang并发工具Singleflight
2022/05/06 Golang