js封裝的textarea操作方法集合(兼容很好)
更新時(shí)間:2010年11月16日 23:09:49 作者:
對(duì)應(yīng)用到對(duì)textarea處理的朋友可以參考下。控制的比較不錯(cuò)的代碼封裝。
雖然你現(xiàn)在看來沒什么用,當(dāng)要用的時(shí)候又到處找資料,還不如現(xiàn)在收集一下。
在DOM里面操作textarea里面的字符,是比較麻煩的。
于是我有這個(gè)封裝分享給大家,測(cè)試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。
注意:在firefox下 添加字符串的時(shí)候有個(gè)bug 就是scrollTop 會(huì)等于0,當(dāng)然解決了,但是不夠完美。如果有高手也研究過,麻煩指點(diǎn)下。
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;
}
}
在DOM里面操作textarea里面的字符,是比較麻煩的。
于是我有這個(gè)封裝分享給大家,測(cè)試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。
注意:在firefox下 添加字符串的時(shí)候有個(gè)bug 就是scrollTop 會(huì)等于0,當(dāng)然解決了,但是不夠完美。如果有高手也研究過,麻煩指點(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;
}
}
相關(guān)文章
前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法總結(jié)
數(shù)組操作是JavaScript中非常重要也非常常用的技巧,這篇文章主要給大家介紹了關(guān)于前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
要從列表框同時(shí)刪除多個(gè)項(xiàng)目只能從下向上刪除,這樣就不會(huì)出現(xiàn)索引號(hào)亂變的問題了,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10
原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)
這篇文章主要介紹了淺談webpack性能榨汁機(jī)(打包速度優(yōu)化),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
這篇文章主要為大家詳細(xì)介紹了使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
前端JavaScript?6?種主流接口請(qǐng)求技術(shù)全解
這篇文章主要介紹了前端JavaScript?6?種主流接口請(qǐng)求技術(shù)的相關(guān)資料,包括XMLHttpRequest、FetchAPI、Axios、jQueryAjax、WebSocket和GraphQL,并提供了每種方案的基礎(chǔ)用法、高級(jí)配置、優(yōu)點(diǎn)、缺點(diǎn)及適用場(chǎng)景,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03

