使用按钮和输入的文本填充文本区域

Question

我正在研究一个在平板电脑上使用的概念，用户可以通过一系列快捷按钮将文本输入文本区域。当然快捷按钮并不能涵盖所有可能性，所以我想保留在文本框中正常输入文本的能力。

我遇到的问题是，在用户将焦点应用于文本区域并进行纯文本编辑后，按钮不再起作用。

<script type="text/javascript">
$(document).ready(function() {
    $("#keypad button").click(function() {
        var txt = $(this).val();
        $("#Textarea").append(txt);
        });
});

<div id="keypad">
<div id="row4">
    <button type="button" class="green45" name="Rt" value="Rt ">Rt</button>
    <button type="button" class="green45" name="Lt" value="Lt ">Lt</button>
    <button type="button" class="green45" name="Up" value="Up ">Up</button>
    <button type="button" class="green45" name="Down" value="Down ">Down</button>
    <button type="button" class="green45" name="Forward" value="Forward ">Forward</button>
    <button type="button" class="green45" name="Back" value="Back ">Back</button>
</div>

我创建了这个小提琴来演示问题http://jsfiddle.net/J228n/2/。首先使用按钮输入一些文本，然后正常输入一些文本，然后再次尝试使用按钮。

Answer 1

$("#keypad button").click(function() {
    var txt = $(this).val();
    $('#Textarea').val(function(i,val){
        return val + txt;
   });
});

jsFiddle

您需要使用.val() 函数，并从按钮返回旧值+ 文本。

Answer 2

试试这个：

$("#keypad button").click(function() {
        var txt = $(this).val();
        var old =$("#Textarea").val();      
        $("#Textarea").val(old+txt);
});

Answer 3

效果很好：

$("#keypad button").click(function() {
        var txt = $(this).val();
        $("#Textarea").val($("#Textarea").val()+txt);
});