Javascript 按钮单击文本插入

下面是我一直在研究的问题的一个JSFIDLE示例：

HTML:

---

在JSFIDLE示例中，我无法通过单击按钮将单击的字符插入文本框。知道如何解决这个问题吗？

使用

val（）

调用的组合，而不是像这样附加：

$（'input'）.val（$（'input'）.val（）+cntrl）

。请看这里：

---

要获取按钮的文本，应使用

$.text（）

函数

这是正确的代码

HTML

---

---

这里有一个小把戏：

因为您只想显示按下了哪个按钮，所以可以在HTML中为按钮指定一个值属性（

value=“c”

，

value=“a”

和

value=“t”

），并在JavaScript代码中使用它将其添加到文本框中

演示。 HTML:

---

如果用

val

替换

append

，这对我有效。通过works，我的意思是单击一个文本框，然后单击一个按钮，将按钮值插入文本框。这并不能真正实现预期的效果-他希望在每个输入中添加项目，但您的代码会进行替换。另外，这不起作用，因为您使用的JQuery选择器与他提供的输入不匹配谢谢@Ben，我已经更新了代码。我想他是想让所有的输入都有多个字符。这就是为什么我认为他将类“active”分配给最近单击的输入，然后将字符附加到其中；在HTML中它们不需要关闭（

），而在XHTML中它们是自动关闭的（

）。还有什么是

$.text（）

，您刚才是指？没有jQuery.text（）方法。@DavidThomas谢谢，我不知道。我将相应地更新我的代码。您不需要两次调用同一个方法，一次调用另一个方法，只需使用匿名函数：

$（input）.val（函数（I，v）{return v+cntrl；}）这很有趣，我以前从未见过使用过-谢谢！A（有点晚了）。
<input type="text">
<input type="text">
<input type="text">
<div>
<button class="buttons">c</button>
<button class="buttons">a</button>
<button class="buttons">t</button>
</div>

$(document).ready(function () {

    $('input').click(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').append(cntrl);
    });
});

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<div> 
<button class="buttons">c</button>
<button class="buttons">a</button>
<button class="buttons">t</button>
</div>

$(document).ready(function () {

    $('input').click(function(){
       $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
       var cntrl = $(this).text();
       var existing  = $('input.active').val();
       $('input.active').val(existing + cntrl);
    });
});

<input id="one" type="text">
<input id="two" type="text">
<input id="three" type="text">
<div>
    <button id="c" class="buttons" value="c">c</button>
    <button id="a" class="buttons" value="a">a</button>
    <button id="t" class="buttons" value="t">t</button>
</div>

$(document).ready(function () {
    $('#c').click(function () {
        $('#one').val($(this).val());
    })

    $('#a').click(function () {
        $('#two').val($(this).val());
    })

    $('#t').click(function () {
        $('#three').val($(this).val());
    })
});