Javascript單擊按鈕插入文本

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，並在追加時選擇該活動的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

使用焦點事件：

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