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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
javascript读取RSS数据
2007/01/20 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
React数据传递之组件内部通信的方法
2017/12/31 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python 面向对象部分知识点小结
2020/03/09 Python
简述 Python 的类和对象
2020/08/21 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
销售经理工作职责范文
2013/12/03 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android