javascript - 如何根据光标位置获取文本框的id

Question

我在 div 元素内有多个文本框。我想通过单击按钮时的光标位置在文本框中插入一些文本。如果我知道文本框的 id，我就可以成功插入文本，但我无法知道光标当前所在的元素。

<div>

    <input type="text" id="txt1" />
    <input type="text" id="Text2" />
    <input type="text" id="Text3" />
    <input type="button" value="Add" id="btnAdd" />
    </div>

$('#btnAdd').click(function () {
            insertDataVarables(document.getElementById('txt1'), 'insertedText')
    });

    function insertDataVarables(myField, myValue) {
        //IE support
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
        }
        //MOZILLA and others
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            myField.value = myField.value.substring(0, startPos)
                + myValue
                + myField.value.substring(endPos, myField.value.length);
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
        } else {
            myField.value += myValue;
        }
    }

那么我如何通过光标位置知道文本框ID。

提前致谢

Answer 1

要在单击按钮时捕获焦点输入，您必须在输入失去焦点之前监听 mousedown 事件。
click 事件来得太晚了，那时输入已经失去焦点。

要获取当前焦点(事件)元素，可以使用 document.activeElement。

所以像这样:

$('#btnAdd').on('mousedown', function() {
  var el = document.activeElement;

    insertDataVarables(el, 'insertedText')
});

FIDDLE