单击后从按钮上移开焦点

阿普斯瓦克

完成一个简单的计算器项目。正如您将在Codepen上看到的那样;当我进行计算时,例如执行“ 2 + 3”,然后按键盘上的Enter键。它返回答案,但也再次输入3(最后输入)。(我认为)这是因为焦点仍然位于单击的最后一个按钮上。

我该如何解决?

http://codepen.io/apswak/pen/RapEqp

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);
    }
  });

});
于Le

只需更改行:

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

进入

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

它会工作。希望这可以帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击ListView上的删除按钮后,删除ListView上的项目

来自分类Dev

单击Play Framework上的按钮后强制下载文件

来自分类Dev

单击操作栏按钮时失去焦点

来自分类Dev

如何从按钮上移开焦点,以便按空格键或Enter不会触发按钮?

来自分类Dev

单击后的按钮颜色

来自分类Dev

单击后禁用按钮

来自分类Dev

单击闪亮的动作按钮后,将光标聚焦在textArea上

来自分类Dev

在每个按钮上单击角度后加载组件

来自分类Dev

单击后隐藏按钮

来自分类Dev

反应:将焦点从转义键上的输入元素上移开

来自分类Dev

将焦点转移到通过单击按钮添加的输入上

来自分类Dev

将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

来自分类Dev

单击FragmentActivity上的后退按钮后,Android维护Activity

来自分类Dev

单击后禁用按钮

来自分类Dev

单击操作栏按钮时失去焦点

来自分类Dev

如何从按钮上移开焦点,以便按空格键或Enter不会触发按钮?

来自分类Dev

单击后删除按钮?

来自分类Dev

单击按钮时更改焦点颜色

来自分类Dev

从Windows 10 Core-XAML上的按钮上移开焦点

来自分类Dev

将焦点设置在按钮单击上的另一个控件上

来自分类Dev

如何使用jquery更改按钮单击上的焦点contenteditable元素的类?

来自分类Dev

单击后动态更改按钮上的名称

来自分类Dev

关闭“altertify”确认模式后如何从按钮上移除焦点?

来自分类Dev

单击后隐藏按钮

来自分类Dev

单击 5 次后单击事件禁用按钮上的按钮

来自分类Dev

在 Tkinter 上单击按钮后如何更改标签的值

来自分类Dev

单击按钮后,GridView 上的类属性不起作用

来自分类Dev

单击按钮后在 GoogleMaps 上显示一个点

来自分类Dev

单击别处后如何使按钮保持焦点状态?

Related 相关文章

  1. 1

    单击ListView上的删除按钮后,删除ListView上的项目

  2. 2

    单击Play Framework上的按钮后强制下载文件

  3. 3

    单击操作栏按钮时失去焦点

  4. 4

    如何从按钮上移开焦点,以便按空格键或Enter不会触发按钮?

  5. 5

    单击后的按钮颜色

  6. 6

    单击后禁用按钮

  7. 7

    单击闪亮的动作按钮后,将光标聚焦在textArea上

  8. 8

    在每个按钮上单击角度后加载组件

  9. 9

    单击后隐藏按钮

  10. 10

    反应:将焦点从转义键上的输入元素上移开

  11. 11

    将焦点转移到通过单击按钮添加的输入上

  12. 12

    将焦点重新放在按钮单击事件C#winforms上以前集中的控件上

  13. 13

    单击FragmentActivity上的后退按钮后,Android维护Activity

  14. 14

    单击后禁用按钮

  15. 15

    单击操作栏按钮时失去焦点

  16. 16

    如何从按钮上移开焦点,以便按空格键或Enter不会触发按钮?

  17. 17

    单击后删除按钮?

  18. 18

    单击按钮时更改焦点颜色

  19. 19

    从Windows 10 Core-XAML上的按钮上移开焦点

  20. 20

    将焦点设置在按钮单击上的另一个控件上

  21. 21

    如何使用jquery更改按钮单击上的焦点contenteditable元素的类?

  22. 22

    单击后动态更改按钮上的名称

  23. 23

    关闭“altertify”确认模式后如何从按钮上移除焦点?

  24. 24

    单击后隐藏按钮

  25. 25

    单击 5 次后单击事件禁用按钮上的按钮

  26. 26

    在 Tkinter 上单击按钮后如何更改标签的值

  27. 27

    单击按钮后,GridView 上的类属性不起作用

  28. 28

    单击按钮后在 GoogleMaps 上显示一个点

  29. 29

    单击别处后如何使按钮保持焦点状态?

热门标签

归档