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;
}
}

相关文章

  • JavaScript中展开运算符及应用的实例代码

    JavaScript中展开运算符及应用的实例代码

    这篇文章主要介绍了JavaScript中展开运算符及应用的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • JavaScript调用堆栈及setTimeout使用方法深入剖析

    JavaScript调用堆栈及setTimeout使用方法深入剖析

    Javascript中会经常用到setTimeout来推迟一个函数的执行并且会在执行到这句话后延迟1秒钟来弹出alert窗口,接下来将介绍一下JavaScript调用堆栈和setTimeout用法,感兴趣的你可不要错过了哈
    2013-02-02
  • 基于javascript如何传递特殊字符

    基于javascript如何传递特殊字符

    在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符,下面通过本篇文章给大家介绍javascript如何传递特殊字符,对js传递特殊字符相关内容感兴趣的朋友一起学习吧
    2015-11-11
  • javascript函数报Uncaught ReferenceError: XXX is not defined

    javascript函数报Uncaught ReferenceError: XXX is not define

    本文主要介绍了javascript函数报Uncaught ReferenceError: XXX is not defined,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • JavaScript中Object的常用方法总结

    JavaScript中Object的常用方法总结

    这篇文章主要为大家整理了7个JavaScript中Object的常用方法的使用,文中的示例代码讲解详细,对我们掌握JavaScript有一点的帮助,感兴趣的可以了解一下
    2023-02-02
  • JS小功能(offsetLeft实现图片滚动效果)实例代码

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码,有需要的朋友可以参考一下
    2013-11-11
  • 一个鼠标移动滑出层效果的实现代码

    一个鼠标移动滑出层效果的实现代码

    一个鼠标移动滑出层的代码,根据网上的视频教程学习的,这也算是第一次练手吧,鼠标靠近复选框的时候,就会显示出一个层,移开则消失。
    2011-08-08
  • Jquery 常用方法一览表(集合)

    Jquery 常用方法一览表(集合)

    之前脚本之家发过相关的文章,这里又是一篇关于jquery常用方法的收集整理,我们给放到一起,学习jquery的朋友可以参考下。
    2010-03-03
  • 微信小程序实现登录注册tab切换效果

    微信小程序实现登录注册tab切换效果

    这篇文章主要为大家详细介绍了微信小程序实现登录注册切换效果,简易版tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js中值引用和地址引用实例分析

    js中值引用和地址引用实例分析

    这篇文章主要介绍了js中值引用和地址引用,结合实例形式分析了javascript值引用和地址引用相关原理、用法及操作注意事项,需要的朋友可以参考下
    2019-06-06

最新评论