Question

例如，如果我首先输入.res是集中的，那么在.res2上写其他地方，我首先尝试了.res的集中，然后单击了{{1 }} div焦点移至第二个输入.operators，但不起作用

.res2

$(".one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.dot").click(function(){
            if($('.res').is(":focus")){
                firstNumber = $('.res').val(($('.res').val()) + $(this).val());
            } else {
                secondNumber = $('.res2').val(($('.res2').val()) + $(this).val());
            }
        })
$(".plus,.subtract,.divide,.multiply").click(function(){
            resultWindow.blur();
            $('.res2').focus();
        })

Answer 1

主要问题是，每次单击按钮时，输入都会模糊，并且按钮会获得焦点。

因此，$('.res').is(":focus")将始终返回false。

要实现此目的，您需要添加另一个事件侦听器，以防止按钮单击的默认行为：

$("button").mousedown(function(e) {e.preventDefault()})

此外，我建议使用此查询选择器：

$(".numbers > button")
$(".operators > button")

因此，您的代码看起来更简单。

看看它是如何工作的：

$("button").mousedown(function(e) {e.preventDefault()})
$(".numbers > button").click(function() {
  if ($('.res').is(":focus")) {
    firstNumber = $('.res').val(($('.res').val()) + $(this).val());
  } else {
    secondNumber = $('.res2').val(($('.res2').val()) + $(this).val());
  }
})
$(".operators > button").click(function() {
  resultWindow.blur();
  $('.res2').focus();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
  <div class="wind">
    <input class="res" value=" " maxlength="24">
    <input class="res2" value=" " maxlength="24">
    <div class="numbers">
      <button class="one" value="1">1</button>
      <button class="two" value="2">2</button>
      <button class="three" value="3">3</button>
      <br>
      <button class="four" value="4">4</button>
      <button class="five" value="5">5</button>
      <button class="six" value="6">6</button>
      <br>
      <button class="seven" value="7">7</button>
      <button class="eight" value="8">8</button>
      <button class="nine" value="9">9</button>
      <br>
      <button class="zero" value="0">0</button>
      <button class="dot" value=".">.</button>
    </div>
    <div class="operators">
      <button class="plus">+</button>
      <button class="subtract">-</button>
      <button class="divide">/</button>
      <button class="multiply">*</button>
      <button class="equal">=</button>
    </div>
  </div>

Answer 2

尝试在按钮上执行mousedown事件而不是click事件，然后阻止默认操作，这应避免输入失去焦点。

$(".one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.dot").on('mousedown', function(event){
  event.preventDefault();
  if($('.res').is(":focus")){...}
  ...
});

如果第一个输入集中，则将第二个输入

2 个答案: