javascript - 如果第一个输入集中在第二个输入上

Question

例如，如果第一个输入 .res 集中在 .res2 上，我该如何做 我首先尝试了这个 .res 是然后当你点击进入 .operators 的按钮时聚焦 div 焦点移动到第二个输入 .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();
        })

        <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 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>