zoukankan      html  css  js  c++  java
  • 【分享】 封装js操作textarea 方法集合(兼容很好)。

    请使用下面的btn操作。
    虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下。

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

    }

  • 相关阅读:
    java基础面试题(一)
    关于Redis的十个高频面试问题
    postgres中的merge join
    cgdb调试postgresql
    再见了,程序员!
    掌握这个小技巧,让你的 C++ 编译速度提升 50 倍!
    C语言修仙大法!基础知识全复习(纯干货)!!!
    一锅端了!北京朝阳一互联网公司被端,警方上门,23人被带走…
    C++入口不是main?知乎上都快打起来了,你们不要再打了啦!
    不用创建项目,直接在 VS 里快速测试 C/C++ 代码 !
  • 原文地址:https://www.cnblogs.com/idche/p/1877577.html
Copyright © 2011-2022 走看看