web应用需求中,很多时候需要截取当前输入框中光标的位置,然后截获用户输入。在指定的输入框中插入文本。
而获取光标位置对于 IE 来说可是相当变态,缘于其复杂的 textrange 特性,而其他浏览器则实现了html5的相关属性,处理很简洁。

var TextRangeUtil = function() {
    var re = {};
    var nonIE = function(fieldId) {
        var field = document.getElementById(fieldId);
        var pos = {};
        pos.start = field.selectionStart;
        pos.end = field.selectionEnd;
        return pos;
    };
    var IE = function(fieldId) {
        var field = document.getElementById(fieldId);
        var pos = {};
        var range = document.selection.createRange();
 
        if (fieldId != range.parentElement().id) return
 
        var range_all = document.body.createTextRange();
 
 
        range_all.moveToElementText(field);
 
        for (var sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++) {
            range_all.moveStart('character', 1);
        }
 
        for (var i = 0; i <= sel_start; i++) {
            if (field.value.charAt(i) == '\n')
            sel_start++;
        }
        pos.start = sel_start;
 
        var range_all = document.body.createTextRange();
        range_all.moveToElementText(field);
 
        for (var sel_end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; sel_end++)
        range_all.moveStart('character', 1);
 
        for (var i = 0; i <= sel_end; i++) {
            if (field.value.charAt(i) == '\n')
            sel_end++;
        }
        pos.end = sel_end;
 
        return pos;
    };
    re.getTextRange = function(fieldId) {
        var field = document.getElementById(fieldId);
 
        if (typeof field.selectionStart === 'number') {
            re.getTextRange = nonIE;
        }
 
        else if (document.selection) {
            re.getTextRange = IE;
        }
        else {
            re.getTextRange = function(){};
        } 
         return re.getTextRange(fieldId);
    };
 
    return re;
} ();

返回是一个对象,此对象的re.start属性是光标的开始字符位置,re.end是光标的结束位置。