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