Question

我用javascript自己的数字键盘输入了问题。我有两次输入都必须填写。我只想在输入元素时输入。当我单击自己的数字键盘中的按钮时，但是结果输入到了我拥有的两个输入中。那么，如何使我的输入仅集中在InputElement上？

我尝试使用if($('input').in(':focus'))，但未给出响应

此处输入

<div class='form-row align-items-center'>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
         <div class='input-group-text'>Rp.</div>
      </div>
      <input id='paymentnominal' name='nominal' value='' class='form-control' placeholder='Nominal'>
    </div>
  </div>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
        <div class='input-group-text'>123</div>
      </div>
    <input id='cardnumber' name='cardnumber' value='' class='form-control' placeholder='Card Number'>
    </div>
  </div>
  <div class='col-auto'>
    <button id='submit' class='btn bg-maroon mb-2'>Add</button>
  </div>
</div>

这是我自己的数字键盘

<button class='numpad1'>1</button>
<button class='numpad2'>2</button>
<button class='numpad3'>3</button>
<button class='numpad4'>4</button>
<button class='numpad5'>5</button>
<button class='numpad6'>6</button>
<button class='numpad7'>7</button>
<button class='numpad8'>8</button>
<button class='numpad9'>9</button>
<button class='numpad0'>0</button>
<button class='numpad00'>00</button>
<button class='numpadx'>X</button>

以及我尝试过的此javascript函数

$('.numpad1').click(function(){
  $( 'input' ).val( function( index, val ) {
    return val + "1";
  });
});

Answer 1

var numPad1 = document.getElementsByClassName('numpad1')[0];
var paymentInput = document.getElementById('paymentnominal');
numPad1.onclick= function(){
   paymentInput.value = paymentInput.value+''+1;
}

Answer 2

单击<button>后，输入都不再具有焦点。您需要跟踪最后关注的输入。

var focusedInput = null;

$(document.body).on('focus', 'input', function() {
  focusedInput = this;
});

$('.numpad1').click(function() {
  if (focusedInput) {
    focusedInput.value = focusedInput.value + '1';
  }
});

button {
  width: 30%;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='form-row align-items-center'>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
         <div class='input-group-text'>Rp.</div>
      </div>
      <input id='paymentnominal' name='nominal' value='' class='form-control' placeholder='Nominal'>
    </div>
  </div>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
        <div class='input-group-text'>123</div>
      </div>
    <input id='cardnumber' name='cardnumber' value='' class='form-control' placeholder='Card Number'>
    </div>
  </div>
  <div class='col-auto'>
    <button id='submit' class='btn bg-maroon mb-2'>Add</button>
  </div>
</div>

<div>
  <button class='numpad1'>1</button>
  <button class='numpad2'>2</button>
  <button class='numpad3'>3</button>
  <button class='numpad4'>4</button>
  <button class='numpad5'>5</button>
  <button class='numpad6'>6</button>
  <button class='numpad7'>7</button>
  <button class='numpad8'>8</button>
  <button class='numpad9'>9</button>
  <button class='numpad0'>0</button>
  <button class='numpad00'>00</button>
  <button class='numpadx'>X</button>
</div>

更一般地：

var focusedInput = null;

$(document.body).on('focus', 'input', function() {
  focusedInput = this;
});

$('button.numpad').click(function() {
  if (focusedInput) {
    focusedInput.value = focusedInput.value + this.innerHTML;
  }
});

button {
  width: 30%;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='form-row align-items-center'>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
         <div class='input-group-text'>Rp.</div>
      </div>
      <input id='paymentnominal' name='nominal' value='' class='form-control' placeholder='Nominal'>
    </div>
  </div>
  <div class='col-auto'>
    <div class='input-group mb-2'>
      <div class='input-group-prepend'>
        <div class='input-group-text'>123</div>
      </div>
    <input id='cardnumber' name='cardnumber' value='' class='form-control' placeholder='Card Number'>
    </div>
  </div>
  <div class='col-auto'>
    <button id='submit' class='btn bg-maroon mb-2'>Add</button>
  </div>
</div>


<div>
  <button class='numpad'>1</button>
  <button class='numpad'>2</button>
  <button class='numpad'>3</button>
  <button class='numpad'>4</button>
  <button class='numpad'>5</button>
  <button class='numpad'>6</button>
  <button class='numpad'>7</button>
  <button class='numpad'>8</button>
  <button class='numpad'>9</button>
  <button class='numpad'>0</button>
  <button class='numpad'>00</button>
  <button class='numpadx'>X</button>
</div>

如何使用按钮编辑或输入焦点InputElement

2 个答案: