js操作textarea方法集合封裝(兼容IE,firefox)
完整測試代碼:
<textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea>
<br />
<input onclick="alert(TT.getCursorPosition(test))" type="button" value="光標(biāo)位置" />
<input onclick="TT.setCursorPosition(test,3)" type="button" value="設(shè)置光標(biāo)到3第位置" />
<input onclick="TT.add(test,'你好')" type="button" value="添加'你好'到光標(biāo)后面" />
<input onclick="TT.del(test,2)" type="button" value="刪除光標(biāo)前2個字符" />
<input onclick="TT.del(test,-2)" type="button" value="刪除光標(biāo)后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 = {
/*
* 獲取光標(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 個字符
* @Method del
* @param t element
* @param n number n>0 后面 n<0 前面
* @return
* 重新設(shè)置 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>
相關(guān)文章
JavaScript工具庫jscpd檢測前端代碼重復(fù)度
在前端開發(fā)中,代碼的重復(fù)度是一個常見的問題,重復(fù)的代碼不僅增加了代碼的維護成本,還可能導(dǎo)致程序的低效運行,為了解決這個問題,有許多工具和技術(shù)被用來檢測和消除代碼重復(fù),其中一個被廣泛使用的工具就是jscpd2023-10-10
小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案
這篇文章主要介紹了小程序?qū)崿F(xiàn)授權(quán)登陸的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型,用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用,需要的可以參考一下2022-09-09
JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM(Document Object Model),即“文檔對象模型”?;谡Z義的邏輯結(jié)構(gòu),DOM將網(wǎng)頁內(nèi)的元素與內(nèi)容呈現(xiàn)為一個清晰、易讀的樹狀模型,下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家,有需要的朋友可以參考下2015-08-08

