将按钮值转移到输入表单

Question

所以我正在尝试创建一个用户输入密码的键盘。我相信我可以弄清楚这背后的整个逻辑，但我无法弄清楚点击其中一个按钮后如何显示输入表单上的点击值。

我的HTML看起来像这样：

 <div class="keypad">
<input type='text' id='display' placeholder='Enter Code' maxlength='4'>
<div class='keys'>
  <div class='row'>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class='row'>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </div>
  <div class='row'>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </div>
 <div class='row'>
   <button>blank</button>
   <button>0</button>
   <button>blank</button>
 </div>

键盘看起来像这样

所以，总而言之，如果用户点击了我想要显示的1,4,5,7个按钮（同时删除占位符文本），则为1457号。

对于纯JS的帮助，我会非常高兴，我不想在这里使用jquery。

Answer 1

您必须将click事件附加到keys类中的所有按钮，然后将单击的按钮文本附加到输入值，如下例所示。

希望他的帮助。

Pure JS Snippet：

var buttons = document.querySelectorAll('.keys button');

for(var i=0;i<buttons.length;i++){
    buttons[i].addEventListener('click', buttonClick);
}

function buttonClick(){
    var display = document.getElementById('display');
       display.value += this.innerHTML;
    
    if(display.value.length == 4){
       if(display.value ==1111){
          display.value = "yay"; 
       } else { 
          display.value = "ERROR"; 
          setTimeout(newDisplay, 3000);
       }
    }
} 

function newDisplay(){ 
   display.value = null;
}

<div class="keypad">
<input type='text' id='display' placeholder='Enter Code' maxlength='4'>
<div class='keys'>
  <div class='row'>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class='row'>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </div>
  <div class='row'>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </div>
 <div class='row'>
   <button>blank</button>
   <button>0</button>
   <button>blank</button>
 </div>
</div>

jQuery代码段

$('.keys button').on('click', function(){
   $('#display').val( $('#display').val() + $(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="keypad">
<input type='text' id='display' placeholder='Enter Code' maxlength='4'>
<div class='keys'>
  <div class='row'>
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div class='row'>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </div>
  <div class='row'>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </div>
 <div class='row'>
   <button>blank</button>
   <button>0</button>
   <button>blank</button>
 </div>
</div>

Answer 2

您需要为每个按钮添加一个单击事件侦听器，然后将该按钮的值添加到输入值。

var input = document.getElementById('display');
var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
    button.addEventListener('click', function() {
    if(input.value.length < 4) {
      input.value += button.innerHTML;
    } else {
      alert('Sorry but you can just use 4 digits');
    }
  })
});

为防止单击空白按钮将其文本添加到输入中，您可以向每个数字按钮添加一个类，即：

<button class="numericButton">1</button>

然后将querySelectorAll参数更改为该类：

var buttons = document.querySelectorAll('.numericButton');

Answer 3

单击按钮时，将每个数字附加到文本框中。

您应该在所有按钮上添加onclick事件。

<button onclick="updateText(this.innerText);">5</button>

现在定义一个更新文本框值的Javascript函数：

function updateText(appendText) { document.getElementById('display').value = document.getElementById('display').value + appendText; }