Question

完成一个简单的计算器项目。正如你在codepen中看到的那样;当我进行计算时，例如执行＆＃34; 2 + 3＆＃34;，然后点击键盘输入按钮。它返回答案，但它也再次输入3（最后一个输入）。（我认为）这是因为焦点仍然在点击的最后一个按钮上。

我该如何解决这个问题？

HTML

<div id="calculator">
  <div id="screen">
    <div id="calc">0</div>
    <div id="result">0</div>
  </div>
  <button class="value">1</button><button class="value">2</button><button class="value">3</button><button class="value">+</button><button class="value">4</button><button class="value">5</button><button class="value">6</button><button class="value">-</button><button class="value">7</button><button class="value">8</button><button class="value">9</button><button class="value">*</button><button class="value">.</button><button class="value">0</button><button class="CE">   &larr;</button><button class="value">/</button><button class="equals">=</button><button class="C">C</button>

</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
  text-align: center;
  background: -webkit-linear-gradient(to top right, #4d48c0, #56BF6D);
  /* Safari */
  background: -o-linear-gradient(to top right, #4d48c0, #56BF6D);
  /* Opera */
  background: -moz-linear-gradient(to top right, #4d48c0, #56BF6D);
  /* Mozilla */
  background: linear-gradient(to top right, #4d48c0, #56BF6D);
  /* Standard */
  background-repeat: no-repeat;
  background-attachment: fixed;
}

button:focus {outline:0;}

#calculator {
  font-family: "Quicksand", sans-serif;
  margin: 60px auto;
  padding: 0;
  width: 300px;
  background-color: #1D1E22;
}

#screen {
  height: 150px;
  width: auto;
  background-color: #4269F4;
  color: whitesmoke;
}

#screen #calc {
  padding-top: 30px;
  font-size: 20px;
}

#screen #result {
  font-size: 50px;
}

.value,
.equals,
.C,
.CE {
  margin: 0;
  width: 75px;
  height: 60px;
  font-size: 25px;
  background-color: #1D1E22;
  color: white;
  border: none;
}

.value:hover,
.equals:hover,
.C:hover,
.CE:hover {
  font-size: 25px;
  background-color: #1a1a1a;
  color: whitesmoke;
  border: none;
}

JS

$(document).ready(function() {

  var string = "";

  /* Calculator input string */
  $(".value").click(function() {
    string += $(this).text();
    $("#calc").text(string);
  });

  /* Clear all */
  $(".C").click(function() {
    string = "";
    $("#calc, #result").text("0");
  });
  /* Clear last entry */
  $(".CE").click(function() {
    string = string.slice(0, string.length - 1);
    $("#calc").text(string);
  });

  /* Show result */
  $(".equals").click(function() {
    $("#result").text(eval(string));
  });

  /* Enabling keyboard input */

  $(document).keydown(function(event) {

    /* Numbers */
    if (event.which == 48) {
      string += 0;
      $("#calc").text(string);
    }
    if (event.which == 49) {
      string += 1;
      $("#calc").text(string);
    }
    if (event.which == 50) {
      string += 2;
      $("#calc").text(string);
    }
    if (event.which == 51) {
      string += 3;
      $("#calc").text(string);
    }
    if (event.which == 52) {
      string += 4;
      $("#calc").text(string);
    }
    if (event.which == 53) {
      string += 5;
      $("#calc").text(string);
    }
    if (event.which == 54) {
      string += 6;
      $("#calc").text(string);
    }
    if (event.which == 55) {
      string += 7;
      $("#calc").text(string);
    }
    if (event.which == 56) {
      string += 8;
      $("#calc").text(string);
    }
    if (event.which == 57) {
      string += 9;
      $("#calc").text(string);
    }
    /* Enter / show result */
    if (event.which == 13) {
      $("#result").text(eval(string));
    }
    /* Backspace */
    if (event.which == 8) {
      string = string.slice(0, string.length - 1);
      $("#calc").text(string);
    }
    /* Clear all with escape or del */
    if (event.which == 27) {
      string = "";
      $("#calc, #result").text("0");
    }

  });

  $(document).keypress(function(event) {
    /* Start of operators */
    if (event.which == 43) {
      string += '+';
      $("#calc").text(string);
    }
    if (event.which == 45) {
      string += "-";
      $("#calc").text(string);
    }
    if (event.which == 42) {
      string += "*";
      $("#calc").text(string);
    }
    if (event.which == 47) {
      string += "/";
      $("#calc").text(string);
    }
    if (event.which == 46) {
      string += ".";
      $("#calc").text(string);
    }
  });

});

Answer 1

只需更改一行：

$(".value").click(function() {

到

$(".value").mousedown(function() {

它会起作用。希望这有帮助。

Answer 2

您可以在.blur();按钮内触发click event 例如

$(".value").click(function() {
  string += $(this).text();
  $("#calc").text(string);
  $(this).blur();

});

Answer 3

您可能应该阻止输入密钥的keydown处理程序中的默认行为：

event.preventDefault();

这将导致它不再触发对焦按钮的点击。

单击后从按钮移除焦点

3 个答案: