将char插入光标所在的活动表单元素中

Inserting char into active form element where cursor is focused

本文关键字：活动表 活动 表单 元素 char 插入 光标      更新时间：2024-03-10

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

到目前为止（由于我对jQuery的了解非常有限），我做了一些简单的操作，正确地获取了点击的字符，但获取活动元素的ID会返回undefined，所以我不能再继续了。

这个http://jsfiddle.net/NaHTw/4/指定了字段ID，所以我真的不知道如何从中获得灵感。

这是我做了一半的小提琴。

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>

查询

$(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'
    });
});

您可以在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

相关文章：