单击按钮时将值添加到textarea

Question

<script type="text/javascript">

$(document).ready(function() {
     $(".buttons").click(function(){
         var cntrl = $(this).html(); 
         $("#txt-area").text(cntrl+",");

         //alert (cntrl);
     });
});

</script>

当我点击我的html页面上的字符时，字符的值设置为textarea，但是当我点击另一个字符时，之前的字符消失了。我知道JS中的数组，但我该如何处理呢。

如何正确地向textarea添加值而不会消失？

Answer 1

尝试

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });

        //alert (cntrl);
    });
});

演示：Fiddle

或

$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");

演示：Fiddle - 我更喜欢使用val（）因为我认为它是一个输入元素

Answer 2

尝试，

$(document).ready(function() { 
     $(".buttons").click(function(){ 
          var cntrl = $(this).html();
          var xTxtArea = $("#txt-area");
          xTxtArea.text(xTxtArea.text() + cntrl + ","); 
     }); 
});

Answer 3

上面的Arun的答案有效，但它会在最后添加一个逗号。如果要避免这种情况，请将逗号放在新值之前，然后检查代码以查看这是否是第一次添加某些内容，而不是在该时间内添加逗号。

$(document).ready(function () {
    var oldvalue;
    var newvalue;
    $(".buttons").click(function () {
        oldvalue = $("#txt-area").val();  //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
        if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
        else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
        $("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
    });
});