javascript - 我希望单击按钮后按钮的值显示在文本框中

Question

我正在创建一个屏幕键盘，并且想要一个功能，该功能允许在按下任何按钮时，其值显示在键盘侧面的文本框中。到目前为止我的代码是:-

<script type="text/javascript">
    function onclick(){
    document.getElementById("output").value
    =document.getElementById("Q").value;  
    }
</script>

以及下面的 HTML 代码:-

<div class ="Row">
    <div class="Box2">
      <form id="keyboard" name="keyboard">
        <div>
        <input type="button" onclick='onclick' id="Q" value="Q">
        <input type="button" value="W">
        <input type="button" value="E">
        <input type="button" value="R">
        <input type="button" value="T">
        <input type="button" value="Y">
        <input type="button" value="U">
        <input type="button" value="I">
        <input type="button" value="O">
        <input type="button" value="P">
        </div>
        <div>
        <input type="button" value="A">
        <input type="button" value="S">
        <input type="button" value="D">
        <input type="button" value="F">
        <input type="button" value="G">
        <input type="button" value="H">
        <input type="button" value="J">
        <input type="button" value="K">
        <input type="button" value="L">
        </div>
        <div>
        <input type="button" value="Z">
        <input type="button" value="X">
        <input type="button" value="C">
        <input type="button" value="V">
        <input type="button" value="B">
        <input type="button" value="N">
        <input type="button" value="M">
        </div>
        <div>
        <input type="button" value="SPACE">
        <input type="button" value="ENTER">
        </div> 
      </form>
      <input type='text' id='output' />
    </div>
  </div>
</div>

Answer 1

您已将其标记为 jQuery，因此这里有一个更优雅的 jQuery 解决方案:扔掉该代码并使用单个委托(delegate)的 jQuery 事件处理程序。从这样的事情开始:

$('[name=keyboard]').on('click', 'input[type=button]', function(){
   var value = $(this).attr('value');
   $('#output').val($('#output').val() + value);
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/kaau601u/

显然，您需要将 SPACE 和 ENTER 作为特殊情况进行处理，但您没有给出下一步要做什么的线索，因此请读者完成:)

注释:

• 您需要将此代码放在它引用的元素后面，或者将其放入 DOM 就绪处理程序中。

像这样:

$(function(){
    $('[name=keyboard]').on('click', 'input[type=button]', function(){
       var value = $(this).attr('value');
       $('#output').val($('#output').val() + value);
    });
});

• 或者您可以使用文档附加处理程序，该处理程序始终存在:

像这样:

 $(document).on('click', 'input[type=button]', function(){
    var value = $(this).attr('value');
    $('#output').val($('#output').val() + value);
 });