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

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

这里是全码：

// 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版本。感谢观看！

来源

2015-10-13 k1r8r0wn

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

https://github.com/keithamus/jwerty

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

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

注意：您必须确保浏览器窗口具有焦点才能使用快捷键。

来源

2015-10-13 13:34:52 freak3dot

感谢您的文章，但我需要一个简单的例子，而不使用任何库或类似的东西。 – k1r8r0wn

尝试使用此笔叉以添加退格键：http://codepen.io/anon/pen/VvzgNQ 您可能想要在更新它之前检查屏幕是否有值。其他按钮将类似。 – freak3dot

当我试图删除数字1.023并且它应该删除'.'时，它会删除完整的'1.0'。重点是什么？它也开始删除后2点击按钮... – k1r8r0wn

我试过这段代码，工作正常。 backspace的动作被捕获，但实际上在鼠标键盘中也没有实现。

$("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(""); 
});

来源

2015-10-13 14:55:18 cesare

也许我做错了什么，但它不工作，你如何使用它？ – k1r8r0wn

http://cesare.heliohost.org/calc/ 它在这个地址工作？我已经尝试过使用Firefox和Chrome，并且看起来很有效。我没有实现删除功能。 – cesare

是的，它的工作原理，但不是fin，因为它用数学运算符更改数字，有时候不是所有数字都能正常工作... – k1r8r0wn

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

回答

相关问题