手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js封装的textarea操作方法集合(兼容很好)
js封装的textarea操作方法集合(兼容很好)
摘要:虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下。在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;

}

}

【js封装的textarea操作方法集合(兼容很好)】相关文章:

jquery使用each方法遍历json格式数据实例

jQuery替换textarea中换行的方法

JS中的Replace方法使用经验分享

Node.js中JavaScript操作MySQL的常用方法整理

javascript操作表格

js跨域请求的5中解决方式

js实现文本框选中的方法

javascript实现树形菜单的方法

js+html5操作sqlite数据库的方法

javascript实现行拖动的方法

精品推荐
分类导航