Question

我有一些表单字段，并希望将单击的字符插入其中（光标的确切位置），但光标可以聚焦在任何表单字段上。因此，如果我点击 a 并且光标位于 1 和 2 text 元素之间，则结果应为 1a23

到目前为止（凭借我非常有限的jQuery知识），我做了一些简单的操作，正确地获取了点击的char，但获得了活动元素的ID返回undefined，所以我不能再进一步了。

这一个http://jsfiddle.net/NaHTw/4/指定了字段ID，因此我无法确定如何激发它。

这是我jsfiddle已完成的一半。

HTML

<div id="chars">
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</div>
<br />
<input type='text' name='title' value="123" id="titleField" />
<br />
<textarea name='message'id="messageField">456</textarea>

JQUERY

$(document).ready(function() {
    $('#chars ul li').click(function(event) {
        event.preventDefault();

        // this is fine
        var char = $(this).text();
        console.log(char);

        // these returns undefined
        console.log($(':focus').attr('id'));
        console.log($(document.activeElement).attr('id'));
        console.log($(this).parents('.item').attr('id'));

        // update 'element' content here by inserting 'char'
    });
});

Answer 1

您可以在javascript中保存最后一个位置，然后插入该选择：

$(document).ready(function() {

    // bind click on textarea and input text then save positions
    var caretpos, lastitem;
    $('input[type=text], textarea').on('click keyup', function(){
        lastitem = $(this).attr('id');
        caretpos = $('#'+lastitem)[0].selectionStart;
    });

    $('#chars ul li').click(function(event) {
        event.preventDefault();
        
        // this is fine
        var char = $(this).text();
        console.log(char);
        
        // update 'element' content here by inserting 'char'
        textval = $('#'+lastitem).val();
        $('#'+lastitem).val(textval.substring(0, caretpos) + char + textval.substring(caretpos) );

        caretpos = $('#'+lastitem)[0].selectionStart;
    });
});

#chars ul { margin: 0; padding: 0; }
#chars li { display: inline; background-color: #aaa; padding: 5px; cursor: pointer; }

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div id="chars">
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
</div>
<br />
<input type='text' name='title' value="123" id="titleField" />
<br />
<textarea name='message' id="messageField">456</textarea>

JSFiddle

编辑2：JSFiddle

将char插入到光标聚焦的活动表单元素中

1 个答案: