您的位置:首页 > Web前端 > JavaScript

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

2017-05-15 13:48 471 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: