Java單擊按鈕插入文本

Question

基於當前選定的光標/文本框，當用戶單擊按鈕/字符時，我希望將字符插入光標所在的位置。

這是一個js小提琴示例：

http://jsfiddle.net/YD6PL/32/

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>

如何使上面的“知道”多個文本框中的哪個被選中並將字符僅插入此框中？

Answer 1

將active類別添加到單擊的文本區域，然后在添加時選擇該活動文本區域。

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

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

jsFiddle演示

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演示

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
});