我怎样才能从输入域中得到插入符号的位置?

我通过谷歌找到了一些碎片,但没有子弹。

基本上像一个jQuery插件将是理想的,所以我可以简单地做

$("#myinput").caretPosition()

当前回答

也许除了光标位置之外,您还需要一个选定的范围。这是一个简单的函数,你甚至不需要jQuery:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

假设你想在输入改变或鼠标移动光标位置时调用它(在这种情况下,我们使用jQuery .on())。出于性能考虑,如果事件大量涌入,添加setTimeout()或下划线_debounce()之类的东西可能是个好主意:

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

这里有一个小提琴,如果你想尝试一下:https://jsfiddle.net/Dhaupin/91189tq7/

其他回答

我已经将bezmax的答案中的功能包装成jQuery,如果有人想使用它。

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);
   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

也许除了光标位置之外,您还需要一个选定的范围。这是一个简单的函数,你甚至不需要jQuery:

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

假设你想在输入改变或鼠标移动光标位置时调用它(在这种情况下,我们使用jQuery .on())。出于性能考虑,如果事件大量涌入,添加setTimeout()或下划线_debounce()之类的东西可能是个好主意:

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

这里有一个小提琴,如果你想尝试一下:https://jsfiddle.net/Dhaupin/91189tq7/

const inpT = document.getElementById("text-box"); const inpC = document.getElementById("text-box-content"); // swch gets inputs . var swch; // swch if corsur is active in inputs defaulte is false . var isSelect = false; var crnselect; // on focus function setSwitch(e) { swch = e; isSelect = true; console.log("set Switch: " + isSelect); } // on click ev function setEmoji() { if (isSelect) { console.log("emoji added :)"); swch.value += ":)"; swch.setSelectionRange(2,2 ); isSelect = true; } } // on not selected on input . function onout() { // الافنت اون كي اب crnselect = inpC.selectionStart; // return input select not active after 200 ms . var len = swch.value.length; setTimeout(() => { (len == swch.value.length)? isSelect = false:isSelect = true; }, 200); } <h1> Try it !</h1> <input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title"> <input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box-content" size="20" value="content"> <button onclick="setEmoji()">emogi :) </button>

现在有一个很好的插件:插入插件

然后你可以得到的位置使用$("#myTextBox").caret()或设置它通过$("#myTextBox").caret(位置)