利用Range改变光标位置

先上代码,代码取自网上某插件

function caret(begin, end) {
    if (this.length == 0) return;
    if (typeof begin == 'number') {
        end = (typeof end == 'number') ? end : begin;
        return this.each(function() {
            if (this.setSelectionRange) { //现代浏览器
                this.focus();
                this.setSelectionRange(begin, end);
            } else if (this.createTextRange) { //IE678
                var range = this.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', begin);
                range.select();
            }
        });
    } else {
        if (this[0].setSelectionRange) { //现代浏览器
            begin = this[0].selectionStart;
            end = this[0].selectionEnd;
        } else if (document.selection && document.selection.createRange) { //IE678
            var range = document.selection.createRange();
            begin = 0 - range.duplicate().moveStart('character', -100000);
            end = begin + range.text.length;
        }
        return {
            begin: begin,
            end: end
        };
    }
}

Range是一个抽象的接口,具有起始位置和结束位置。如果起始位置等于结束位置,则形成光标。
其中Range.collapse(bool)就是让起始位置和结束位置重合,bool=true(默认值),在起始位置重合;bool=false,在结束位置重合。
Range.select()就是选择文本。

参考链接

  1. 各浏览器对 Range 接口的实现存在差异
  2. TextRange object
  3. 设置输入域(input/textarea)中文本光标的位置
posted @ 2015-06-18 21:37  ThreeTree  阅读(1090)  评论(2编辑  收藏  举报