快捷導(dǎo)航

js操作textarea 常用方法總結(jié)

更新時(shí)間：2012年12月03日 15:52:09 作者：

在DOM里面操作textarea里面的字符，是比較麻煩的,本文將介紹一種比較簡(jiǎn)單的方法，需要的朋友可以參考下

在DOM里面操作textarea里面的字符，是比較麻煩的。
于是我有這個(gè)封裝分享給大家，測(cè)試過(guò)IE6,8, firefox ,chrome, opera , safari。兼容沒(méi)問(wèn)題。
注意：在firefox下添加字符串的時(shí)候有個(gè)bug 就是scrollTop 會(huì)等于0，當(dāng)然解決了，但是不夠完美。如果有高手也研究過(guò)，麻煩指點(diǎn)下。

復(fù)制代碼代碼如下:

 
var TT = { 
/* 
* 獲取光標(biāo)位置 
* @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 
}, 
/* 
* 設(shè)置光標(biāo)位置 
* @Method setCursorPosition 
* @param t element 
* @param p number 
* @return 
*/ 
setCursorPosition:function(t, p){ 
this.sel(t,p,p); 
}, 
/* 
* 插入到光標(biāo)后面 
* @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) 
}; 
}, 
/* 
* 刪除光標(biāo) 前面或者后面的 n 個(gè)字符 
* @Method del 
* @param t element 
* @param n number n>0 后面 n<0 前面 
* @return 
* 重新設(shè)置 value 的時(shí)候 scrollTop 的值會(huì)被清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(); 
} 
}, 
/* 
* 選中一個(gè)字符串 
* @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; 
} 
} 