js操作textarea方法集合封装(兼容IE,firefox)

注意：在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>

赞 (0)

相关推荐

  • javascript document.images实例

    <script> dxy=''; for (cnrose=0;cnrose<document.images.length;cnrose++) {  dxy+='<img src='+document.images[cnrose].src+'>[br]' } if(dxy!='')  {   document.write(dxy);   void(document.close())  } else  {  alert('No images!')  }  </script&

  • Backbone.js中的集合详解

    Backbone.js中的集合详解

    Backbone.js的集合只是一个简单的有序集的模型.通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层.此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图.这样,它可以用于如下的情况: 复制代码 代码如下: Model: Animal, Collection: Zoo 通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型. 复制代码 代码如下: Model: person, Collection: Offi

  • js采用map取到id集合组并且实现点击一行选中一行

    复制代码 代码如下: <tbody > <tr > <td >1</td> <td>楼盘开业<br>折扣大大</td> <td>2011-11-11</td> <td>短信通知</td> </tr> <tr > <td>2</td> <td>楼盘开业<br>折扣大大</td> <td&g

  • js通过元素class名字获取元素集合的具体实现

    复制代码 代码如下: function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allEleme

  • html的DOM中document对象images集合用法实例

    本文实例讲述了html的DOM中document对象images集合用法.分享给大家供大家参考.具体分析如下: images 集合可返回对文档中所有 Image 对象的引用. 语法: 复制代码 代码如下: document.images[] 为了与 0 级 DOM 兼容,该集合不包括由 <object> 标记定义的图像. 例子: 复制代码 代码如下: <html> <body> <img border="0" src="hackanm

  • js封装的textarea操作方法集合(兼容很好)

    虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari.兼容没问题. 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 复制代码 代码如下: var TT = { /* * 获取光标位置 * @Method get

  • js 提取class相同的节点集合

    function GetClass(className){return getElementsByClassName(className)} var $c=function(array){var nArray = [];for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS入门代码集合第1/4页

    基础知识:HTML  JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language="JavaScript">   2: JavaScript code goes here   3: </script>    2 隐藏脚本代码   1: <script language="JavaScript">   2: <!--   3: document.write("Hello&quo

  • js操作textarea方法集合封装(兼容IE,firefox)

    注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 完整测试代码: 复制代码 代码如下: <textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea><br /><input onclick=&q

  • JS操作JSON方法总结(推荐)

    JSON概述: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包. JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解

  • 3分钟掌握常用的JS操作JSON方法总结

    3分钟掌握常用的JS操作JSON方法总结

    工作中做了几款自动化测试工具都是跟日志读取相关,日志格式又大多数都是JSON,所以这里把常用的JS操作JSON的方法做了总结~~ 一.概要简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在JSON中,有两种结构:对象和数组 1.对象以"{"开始,"}"结束,"key

  • C#操作IIS方法集合

    C# 操作IIS方法集合 如果在win8,win7情况下报错:未知错误(0x80005000) ----见http://www.jb51.net/article/72881.htm using System; using System.Collections; using System.Collections.Generic; using System.DirectoryServices; using System.Linq; using System.Net; using System.Tex

  • js操作textarea 常用方法总结

    在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari.兼容没问题. 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 复制代码 代码如下: var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element *

  • js操作输入框中选择内容兼容IE及其他主流浏览器

    工作中遇到需要给输入框中选中的内容增加超链接 复制代码 代码如下: function addHref(des){ var selectedText=""; if(window.getSelection&&des != undefined){//兼容非IE浏览器,由于非IE浏览器需要给定操作的元素ID才可以获取输入元素中选中的内容,因此需要输入ID var textField=document.getElementById(des); var selectionStart

  • js 获取页面高度和宽度兼容 ie firefox chrome等

    复制代码 代码如下: <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; alert(yScroll) //得到页面宽度 var xScroll=(docume

  • js操作XML文件的实现方法兼容IE与FireFox

    最近项目中用到了xml,需求是用户安装产品时先把一系列的数据保存到xml文件中,当执行到最后一步时才写入数据库,这样最大限度的减少了数据库的访问,于是不得不纠结在各浏览器的兼容性的问题(悲哀啊....) 进入正文 下面是一个xml文件 (createInstal.xml) <?xml version="1.0" encoding="utf-8"?> <info> <Item> <id descrption="级别&

  • js中json对象和字符串的理解及相互转化操作实现方法

    本文实例讲述了js中json对象和字符串的理解及相互转化操作实现方法.分享给大家供大家参考,具体如下: <script> var str="{'strv':["+ "{'a':'a11'},"+ " {'a':'b222'}"+ " ]}"; //如果放在一行更清楚:var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}"; var str2=eval('(

随机推荐