javascript - 如何在使用 jquery/javascript 单击 div 时将字符添加到文本框

Question

我正在构建自己的 jquery 键盘，当单击或触摸 div 时，我需要在 x 字段中输入 x 字符。

这是我的一些键盘 HTML 结构:

<input id="name" name="name" type="text" />

<div class="key-row" style="width: 1092px;">
    <div id="k-q" class="key">Q</div>
    <div id="k-w" class="key">W</div>
    <div id="k-e" class="key">E</div>
    <div id="k-r" class="key">R</div>
    <div id="k-t" class="key">T</div>
    <div id="k-y" class="key">Y</div>
    <div id="k-u" class="key">U</div>
    <div id="k-i" class="key">I</div>
    <div id="k-o" class="key">O</div>
    <div id="k-p" class="key">P</div>
</div>

这是我正在处理的 jquery:

$( "#k-q" ).click(function() {
    //alert( "Q pressed" );
    // $('#name').append('Q');
    // $("input[type='text']").append('some new text')
    // $('#name').add( "aaaaa" );
    //$('#name').text('Q');
    $('#name').val('Q');
});

如您所见，我已经尝试了不同的输入方式。唯一完成这项工作的是使用 var() 方法的方法，但我不能使用它，因为它只会替换已输入的文本。我需要这样的方式，如果我按“Q”3 次，字母“Q”会在文本框中出现 3 次。

我如何使用 jquery 或 javascript 做到这一点？

Answer 1

此代码段将字母添加到文本框中。如果你只想把点击的字母，删除变量 currentName

$("div.key").click(function(e){
  var currentName = $("#name").val();
  $("#name").val(currentName + $(this).text());
});

.key{
border: 1px solid #333;
padding: 2px;
width: 16px;
margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" name="name" type="text" />

<div class="key-row" style="width: 1092px;">
    <div id="k-q" class="key">Q</div>
    <div id="k-w" class="key">W</div>
    <div id="k-e" class="key">E</div>
    <div id="k-r" class="key">R</div>
    <div id="k-t" class="key">T</div>
    <div id="k-y" class="key">Y</div>
    <div id="k-u" class="key">U</div>
    <div id="k-i" class="key">I</div>
    <div id="k-o" class="key">O</div>
    <div id="k-p" class="key">P</div>
</div>