DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> KeleyiTextarea類(Javascript操作textarea)
KeleyiTextarea類(Javascript操作textarea)
編輯:關於JavaScript     
KeleyiTextarea類,是一個Javascript操作textarea的類,封裝集合了操作textarea的多個方法,包括獲取光標位置,添加內容到光標位置,選中字符串,設置光標位置,刪除光標前後字符串等(兼容IE,chrome,firefox)。

下面是KeleyiTextarea類的應用示例。




類的代碼如下:

<script type="text/javascript">
var KeleyiTextarea= {

/*
* 獲取光標位置 www.
* @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
},


/*
* 設置光標位置 www.keleyi.com
* @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;
t.value = t.value.slice(0, t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);
this.setCursorPosition(t, cp + txt.length);
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();
}
},


/*
* 選中一個字符串 keleyi.com
* @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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved