Javascript 单击按钮插入文本

Question

基于当前选定的光标/文本框，当用户单击按钮/字符时，我希望将字符插入到光标所在的位置。

这是一个 js fiddle 示例:

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 Demo