Question

根据所选的当前光标/文本框，当用户点击一个按钮/字符时，我希望在光标所在的位置插入字符。

这是一个小小的例子：

JS：

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $("#txt-area1").append(cntrl);//not sure what to use here to "know" where cursor currently is
    });
});

HTML：

<textarea id="txt-area1" readonly></textarea>
<textarea id="txt-area2" readonly></textarea>
<textarea id="txt-area3" readonly></textarea>
<textarea id="txt-area4" readonly></textarea>
<div>
<button class="buttons">á</button>
<button class="buttons">é</button>
<button class="buttons">í</button>
<button class="buttons">ó</button>
<button class="buttons">ú</button>
<button class="buttons">ñ</button>
<button class="buttons">ü</button>
</div>

我怎样才能使上述＆＃34;知道＆＃34;选择了多个文本框中的哪一个并将该字符仅插入此框？

Answer 1

将一个active类添加到单击的textarea中，并在追加时选择该活动的textarea。

$('textarea').click(function(){
    $(this).addClass('active').siblings('.active').removeClass('active')
});

$(".buttons").click(function () {
    var cntrl = $(this).html();
    $('textarea.active').append(cntrl);
});

jsFiddle Demo

Answer 2

在textarea上使用焦点事件：

$(document).ready(function () {

    var selected = undefined;

    $('textarea').on('focus', function(){
        selected = $(this)
    })

    $(".buttons").click(function () {
        if(selected) {
            var cntrl = $(this).html();
            selected.append(cntrl);
        }
    });
});

jsFiddle Demo

Answer 3

var currentDiv;

$(document).ready(function () {
    $(".buttons").click(function (el) {
        var cntrl = $(this).html();

        $(currentDiv).append(cntrl);
    });
});

$("#parent").click(function(e) {
    currentDiv = e.target
});

Javascript单击按钮插入文本

3 个答案: