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

Answer 2

当光标位于文本框中时，将其保存在全局变量中。单击“开”按钮可将值插入已保存的元素。希望以下代码片段可以帮助您。

＆＃13;

var selctedElm;

$(document).on('click', '#btnAdd', function () {
    selctedElm && selctedElm.val('insertedText');
});

$(document).on('click', 'input[type=text]', function() {
    selctedElm = $(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="text" id="txt1" />
    <input type="text" id="Text2" />
    <input type="text" id="Text3" />
    <br/><br/>
    <input type="button" value="Add" id="btnAdd" />
</div>

＆＃13;

Answer 3

这是 adeneo

给出的答案

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

        insertDataVarables(el, '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;
            }
        }

    <div>

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

如何通过光标位置

3 个答案: