为 jQuery 计算器添加键盘支持和退格键

Question

如何为计算器和退格功能添加简单的键盘支持以删除最后输入的数字（如果数字 > 1）或 . 符号？我还需要同时使用. 和, 符号来执行类似(1.02 + 1,02 = 2.04) 的操作。

这里是完整的代码：

// Calculator script

$(function() {

  // Main variables
  var $screen = $('.screen');
  var value = 0;
  var start = true;
  var action = 0;

  // Display '0' on load
  $screen.text('0');

  // Digits
  $('.digit').on('click', function() {
    var mytext = $(this).text();
    var curtext = (start) ? '0' : $screen.text();
    start = false;
    if (mytext == '.') {
      if (curtext.indexOf('.') < 0) {
        $screen.text(curtext + mytext);
      }
    } else {
      if (curtext === '0') {
        // Overwrite
        $screen.text(mytext);
      } else {
        $screen.text(curtext + mytext);
      }
    }
  });

  // Maths operations
  function Maths_operations() {
    var num = parseFloat($screen.text());
    switch (action) {
      case 0:
        { // Nothing?
          value = num;
        }
        break;
      case 1:
        { // Add
          value += num;
        }
        break;
      case 2:
        { // Subtract
          value -= num;
        }
        break;
      case 3:
        { // Multiply
          value *= num;
        }
        break;
      case 4:
        { // Divide
          if (num == 0) {
            value = 'Error'; // Couldn't divide by zero!
          } else {
            value /= num;
          }
        }
        break;
      default:
        break; // Shouldn't happen...
    }
    start = true; // New number now...
  }

  // Actions
  $('.action').on('click', function() {
    switch ($(this).text()) {
      case 'C':
        { // Clear
          value = 0;
          $screen.text('0');
          action = 0;
          start = true;
        }
        break;
      case '←':
        { // Delete last
          Maths_operations();
          action = 5;
        }
        break;
      case '\u00F7':
        { // Divide
          Maths_operations();
          action = 4;
        }
        break;
      case '\u00D7':
        { // Multiply
          Maths_operations();
          action = 3;
        }
        break;
      case '-':
        { // Subtract
          Maths_operations();
          action = 2;
        }
        break;
      case '+':
        { // Add
          Maths_operations();
          action = 1;
        }
        break;
      case '=':
        { // Equals
          Maths_operations();
          $screen.text(value);
          action = 0; // Nothing
        }
        break;
      default:
        { // If it's not a button
          console.log($(this).text());
        }
    }
  });

});

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  /* Global text styling */
  font-family: 'Roboto Mono', Helvetica, Arial, sans-serif;
}

/* Background */
html {
  height: 100%;
  background: rgba(171, 168, 168, 0.82);
  background-size: cover;
}

/* Name */
.pre-top > span {
  display: block;
  
  /* Special text styling */
  font-family: 'Josefin Slab', Monospace, sans-serif;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

.pre-top .version {
  margin-bottom: 10px;
  font-size: 12px;
}

/* Calculator body */
.calculator {
  
  /* Absolute horizontal & vertical centering */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 400px;
  height: auto;
  padding: 20px 20px 9px;
  background: #b8c6cc;
  background: linear-gradient(#979fa2 14.9%, #6a7073 52.31%);
  border-radius: 3px;
  
  /* Using box shadows to create 3D effects */
  box-shadow: 0 4px #5e6264, 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top */
.top span.clear {
  float: left;
}

.top .screen {
  height: 40px;
  width: 212px;
  float: right;
  padding: 0 10px;
  margin-bottom: 20px;
  /* Inset shadow on the screen to create some indent */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
  /* Typography */
  font-size: 17px;
  line-height: 40px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-align: right;
  letter-spacing: 1px;
}

/* Clear floats */
.keys,
.top {
  overflow: hidden;
}

/* Applying same to the keys */
.keys span,
.top span.clear,
.top span.backspace {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 36px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.2);
  margin: 0 8px 11px 0;
  color: #000;
  line-height: 36px;
  text-align: center;
 
  /* Smoothing out hover and active states using css3 transitions */
  transition: all 0.2s ease;
  /* Prevent selection of text inside keys in all browsers*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.keys span {
  width: 84px;
}

/* Style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
  background: #f5ac75;
  /* Remove right margins from operator keys */
  margin-right: 0;
  color: #fff;
}

.keys span.eval {
  background: #79de9e;
  color: #fff;
}

.top span.clear,
.top span.backspace {
  background: #e79199;
  color: #fff;
}

/* Some hover effects */
.keys span:hover {
  background: #7d8ae3;
  box-shadow: 0 4px #5963a0;
  color: #fff;
}

.keys span.operator:hover {
  background: #fa9345;
  box-shadow: 0 4px #ce8248;
}

.keys span.eval:hover {
  background: #39f788;
  box-shadow: 0 4px #2fc66e;
  color: #fff;
}

.top span.clear:hover,
.top span.backspace:hover {
  background: #f86670;
  box-shadow: 0 4px #d5656d;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
  top: 4px;
  box-shadow: 0 0 #6b54d3;
}

.keys span.eval:active {
  top: 4px;
  box-shadow: 0 0 #717a33;
}

.top span.clear:active,
.top span.backspace:active {
  top: 4px;
  box-shadow: 0 0 #d3545d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Some Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab|Roboto+Mono:500' rel='stylesheet' type='text/css'>

<!-- Calculator -->
<div class="calculator">

  <!-- Name -->
  <div class="pre-top">
    <span class="name">jQuery calculator</span>
    <span class="version">v1.1</span>
  <div>

  <!-- Clear key & screen-->
  <div class="top">
    <span class="action clear">C</span>
    <span class="action backspace">←</span>
    <span class="screen"></span>
  </div>

  <!-- Operators and other keys -->
  <div class="keys">
    <span class="digit">7</span>
    <span class="digit">8</span>
    <span class="digit">9</span>
    <span class="action operator">+</span>
    <span class="digit">4</span>
    <span class="digit">5</span>
    <span class="digit">6</span>
    <span class="action operator">-</span>
    <span class="digit">1</span>
    <span class="digit">2</span>
    <span class="digit">3</span>
    <span class="action operator">&divide;</span>
    <span class="digit">0</span>
    <span class="digit">.</span>
    <span class="action eval">=</span>
    <span class="action operator">&times;</span>
  </div>
    
</div>

和Codepen 版本。感谢收看！

Answer 1

当我向 Web 应用程序添加快捷键时，我最终使用了 jwerty。我将它与 jQuery 一起使用，但它没有依赖项。

https://github.com/keithamus/jwerty

它可以很容易地指定键和事件处理程序。

jwerty.key('⌫', function () {
    //Code here to remove last char from calculator screen
});

注意：您必须确保浏览器窗口具有焦点，快捷键才能正常工作。

Answer 2

我试过这个 sn-p 并且工作正常。 退格的动作被捕获，但实际上在鼠标键盘中也没有实现。

$( "body" ).keydown(function( event ) {

  if ( event.which == 13 || event.which == 8) {
   event.preventDefault();
  }

    var input= mapKey(event.which);
    if(input == undefined)return;
    var mytext = input;


    var curtext = (start) ? '0' : $screen.text();
    start = false;
    if (mytext == '.' || mytext == ',' ) {
      if (curtext.indexOf('.') < 0) {
        $screen.text(curtext + mytext);
      }
    } else {
      if (curtext === '0') {
        // Overwrite
        $screen.text(mytext);
      } else if(jQuery.isNumeric(mytext)) {
        $screen.text(curtext + mytext);
      }
    }
   console.log(mytext);
    switch (mytext) {

  case 'c':
    { // Clear
      value = 0;
      $screen.text('0');
      action = 0;
      start = true;
    }
    break;
  case '←':
    { // Delete last
      Maths_operations();
      action = 5;
    }
    break;
  case '\u00F7':
    { // Divide
      Maths_operations();
      action = 4;
    }
    break;
  case '\u00D7':
    { // Multiply
      Maths_operations();
      action = 3;
    }
    break;
  case '-':
    { // Subtract
      Maths_operations();
      action = 2;
    }
    break;
  case '+':
    { // Add
      Maths_operations();
      action = 1;
    }
    break;
  case '=':      
    { // Equals
      Maths_operations();
      $screen.text(value);
      action = 0; // Nothing
    }
    break;
  default:
    { // If it's not a button
     // console.log($(this).text());
    }
}
function mapKey(myKey){
    switch(myKey){
      case 48:
      case 96:
      return "0";
      case 49:
      case 97:
      return "1";
      case 50:
      case 98:
      return "2";
      case 51:
      case 99:
      return "3";
      case 52:
      case 100:
      return "4";
      case 53:
      case 101:
      return "5";
      case 54:
      case 102:
      return "6";
      case 55:
      case 103:
      return "7";
      case 56:
      case 104:
      return "8";
      case 57:
      case 105:
      return "9";
      case 67:
      return "c";
      case 8:
      return '←';
      case 13:
      case 187:
      return '=';
      case 109:
      return '-';
      case 107:
      return '+';
      case 111:
      return '\u00F7';
      case 106:
      return '\u00D7';
      case 188:
      case 190:
      return '.';

    }
  }
  //$(this).text().append("");
});