js封装的textarea操作方法集合(兼容很好)

 更新时间:2010年11月16日 23:09:49   作者:  
对应用到对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;
}
}

相关文章

  • layui table设置某一行的字体颜色方法

    layui table设置某一行的字体颜色方法

    今天小编就为大家分享一篇layui table设置某一行的字体颜色方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 前端JavaScript经典操作之数组常用方法总结

    前端JavaScript经典操作之数组常用方法总结

    数组操作是JavaScript中非常重要也非常常用的技巧,这篇文章主要给大家介绍了关于前端JavaScript经典操作之数组常用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • js实现弹窗暗层效果

    js实现弹窗暗层效果

    本文主要分享了js实现弹窗暗层效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript如何从listbox里同时删除多个项目

    JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目只能从下向上删除,这样就不会出现索引号乱变的问题了,下面有个不错的示例,大家可以感受下
    2013-10-10
  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 浅谈webpack性能榨汁机(打包速度优化)

    浅谈webpack性能榨汁机(打包速度优化)

    这篇文章主要介绍了浅谈webpack性能榨汁机(打包速度优化),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用Javascript在HTML中显示实时时间

    使用Javascript在HTML中显示实时时间

    这篇文章主要为大家详细介绍了使用Javascript在HTML中显示实时时间,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 详解jQuery事件

    详解jQuery事件

    本文主要介绍了jQuery事件的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js函数模拟显示桌面.scf程序示例

    js函数模拟显示桌面.scf程序示例

    这篇文章主要介绍了一个模拟显示桌面.scf程序的JS小函数,需要的朋友可以参考下
    2014-04-04
  • 前端JavaScript 6 种主流接口请求技术全解

    前端JavaScript 6 种主流接口请求技术全解

    这篇文章主要介绍了前端JavaScript 6 种主流接口请求技术的相关资料,包括XMLHttpRequest、FetchAPI、Axios、jQueryAjax、WebSocket和GraphQL,并提供了每种方案的基础用法、高级配置、优点、缺点及适用场景,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03

最新评论