js操作textarea 常用方法總結
更新時間:2012年12月03日 15:52:09 作者:
在DOM里面操作textarea里面的字符,是比較麻煩的,本文將介紹一種比較簡單的方法,需要的朋友可以參考下
在DOM里面操作textarea里面的字符,是比較麻煩的。
于是我有這個封裝分享給大家,測試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。
注意:在firefox下 添加字符串的時候有個bug 就是scrollTop 會等于0,當然解決了,但是不夠完美。如果有高手也研究過,麻煩指點下。
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;
}
}
于是我有這個封裝分享給大家,測試過IE6,8, firefox ,chrome, opera , safari。兼容沒問題。
注意:在firefox下 添加字符串的時候有個bug 就是scrollTop 會等于0,當然解決了,但是不夠完美。如果有高手也研究過,麻煩指點下。
復制代碼 代碼如下:
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;
}
}
您可能感興趣的文章:
- JS實現(xiàn)選擇TextArea內文本的方法
- JS獲取及設置TextArea或input文本框選擇文本位置的方法
- js監(jiān)聽鼠標事件控制textarea輸入字符串的個數(shù)
- 限制textbox或textarea輸入字符長度的JS代碼
- JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)
- JS在TextArea光標位置插入文字并實現(xiàn)移動光標到文字末尾
- JS控制文本框textarea輸入字數(shù)限制的方法
- JS 排序輸出實現(xiàn)table行號自增前端動態(tài)生成的tr
- js動態(tài)為代碼著色顯示行號
- JS給Textarea文本框添加行號的方法
相關文章
JavaScript調用堆棧及setTimeout使用方法深入剖析
Javascript中會經常用到setTimeout來推遲一個函數(shù)的執(zhí)行并且會在執(zhí)行到這句話后延遲1秒鐘來彈出alert窗口,接下來將介紹一下JavaScript調用堆棧和setTimeout用法,感興趣的你可不要錯過了哈2013-02-02javascript函數(shù)報Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報Uncaught?ReferenceError:?XXX?is?not?defined,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07JS小功能(offsetLeft實現(xiàn)圖片滾動效果)實例代碼
這篇文章主要介紹了offsetLeft實現(xiàn)圖片滾動效果實例代碼,有需要的朋友可以參考一下2013-11-11