光标对象操作的方法整理

光标对象操作的方法整理

var _Range = {
    getRange: function(){
        var sel ;
        if (!window.getSelection) {
            return null ;
        }
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            return sel.getRangeAt(0);
        } else {
            return null ;
        }
    } ,
    //获取光标位置函数 不适合contenteditable元素，适用input
    getCursortPosition: function (ctrl) {
        var CaretPos = 0;                                                   // IE Support
        if (document.selection) {
            ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }else if (ctrl.selectionStart || ctrl.selectionStart == '0')        // Firefox support
            CaretPos = ctrl.selectionStart ;
        return (CaretPos);
    } ,
    // 设置光标位置函数 不适合contenteditable元素，适合input
    setInputCaretPosition(ctrl, pos){
        debugger;
        if(ctrl.setSelectionRange) {
            ctrl.focus();
            ctrl.setSelectionRange( pos , pos ) ;
        } else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    },
    // 光标的位置,光标的字符偏移量 适合contenteditable元素，不适合input
    getCaretCharacterOffsetWithin: function( element , current_range ){
        var caretOffset = 0;
        var doc = element.ownerDocument || element.document;
        var win = doc.defaultView || doc.parentWindow;
        var sel;
        if (typeof win.getSelection != "undefined") {
            sel = win.getSelection();
            if (sel.rangeCount > 0) {
                var range = current_range ? current_range : win.getSelection().getRangeAt(0) ;
                var preCaretRange = range.cloneRange();
                preCaretRange.selectNodeContents(element);
                preCaretRange.setEnd(range.endContainer, range.endOffset);
                caretOffset = preCaretRange.toString().length;
            }
        } else if ((sel = doc.selection) && sel.type != "Control") {
            var textRange = sel.createRange();
            var preCaretTextRange = doc.body.createTextRange();
            preCaretTextRange.moveToElementText(element);
            preCaretTextRange.setEndPoint("EndToEnd", textRange);
            caretOffset = preCaretTextRange.text.length;
        }
        return caretOffset;
    } ,
    // 设置光标位置函数  适合contenteditable元素 , 不适合input
    setCaretPosition: function ( node , textNode , caret ){
        node.focus();
        var range = document.createRange();

        range.setStart(textNode, caret);
        range.setEnd(textNode, caret);

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } ,
    // 光标的像素位置  适合contenteditable元素 , 不适合input
    getCursorOffset: function(){    // 也可以直接，range.getBoundingClientRect()  不过我遇到过bug,推荐这个方法。
        var clonedRange, offset, range, rect, shadowCaret;
        if (window.getSelection && (range = this.getRange())) {
            if (range.endOffset - 1 > 0 && range.endContainer !== this.domInputor) {
                clonedRange = range.cloneRange();
                clonedRange.setStart(range.endContainer, range.endOffset - 1);
                clonedRange.setEnd(range.endContainer, range.endOffset);
                rect = clonedRange.getBoundingClientRect();
                offset = {
                    height: rect.height,
                    left: rect.left + rect.width,
                    top: rect.top
                };
                clonedRange.detach();
            }
            if (!offset || (offset != null ? offset.height : void 0) === 0) {
                clonedRange = range.cloneRange();
                shadowCaret = document.createTextNode("|");
                clonedRange.insertNode(shadowCaret);
                clonedRange.selectNode(shadowCaret);
                rect = clonedRange.getBoundingClientRect();
                offset = {
                    height: rect.height,
                    left: rect.left,
                    top: rect.top
                };
                shadowCaret.parentNode.removeChild(shadowCaret);
                clonedRange.detach();
            }
        }
        return offset;
    } ,
    // 获取光标所在的元素  适合contenteditable元素 , 不适合input
    getSelectionStart: function() {
       return document.getSelection().anchorNode ;
    } ,
    // 设置光标跳转最后 适合contenteditable元素 , 不适合input
    moveToEnd : function( obj ){
        if (window.getSelection) {  //ie11 10 9 ff safari
            obj.focus();            //解决ff不获取焦点无法定位问题
            var range = window.getSelection();  //创建range
            range.selectAllChildren(obj);       //range 选择obj下所有子内容
            range.collapseToEnd();              //光标移至最后
        }
        else if (document.selection) {          //ie10 9 8 7 6 5
            var range = document.selection.createRange();   //创建选择对象
            //var range = document.body.createTextRange();
            range.moveToElementText(obj);                   //range定位到obj
            range.collapse(false);                          //光标移至最后
            range.select();
        }
    } ,
    // 光标处插入内容 适合contenteditable元素 , 不适合input
    insertHtmlAtCurrent: function( html , current_range ){
        var sel, range;
        if (window.getSelection) {
            sel = current_range ? current_range : window.getSelection() ;
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(),
                    node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            document.selection.createRange().pasteHTML(html);
        }
    }
}

参考网站：

1、三水清 javascript获取光标位置以及设置光标位置

2、Range及TextRange理解及区别 这篇文章排版凌乱，如果需要操作TextRange之类的可以看看。

3、JavaScript 获取输入时的光标位置及场景问题 这篇强烈推荐，质量很高。

4、JS Range HTML文档/文字内容选中、库及应用介绍

5、html元素contenteditable属性如何定位光标和设置光标一个例子。

6、textarea js实现的光标位置工具函数这个也好凌乱，不过以上看完应该能有解决方案了。如果对于操作textarea input需求大的可以看这篇。