Berechnen Sie die Eingabe von innen wie einen Taschenrechner

Question

Ohne einen Taschenrechner anzuzeigen, richte ich eine jQuery-Funktion ein, um direkt in einer Eingabe wie eingegeben zu berechnen. Ich bin nah dran, die Zusatzroutinen arbeiten ok-ish. Die Subtraktion ist etwas eigenartig, da ich versuche, Testdaten einzugeben, die nicht ganz fließen. Hier

ist die Geige - https://jsfiddle.net/Lusaj8kc/4/

So wie i-Typ in 15 + 5 + 7 +, erhalte ich meine Antwort von 27. Ich habe die Plus-Taste die angeforderte Operation ein wenig außerhalb der Reihenfolge ausgeführt werden. Da die Ergebnisse automatisch angezeigt werden, sollte keine Eingabetaste benötigt werden, und ich möchte die Eingabetaste trotzdem in ein Formular einreichen.

Wenn ich 15 + 5 - 7 eintippe, müsste ich noch einmal drücken - und ergibt 3 als Subtraktion 5 von 15 zuerst. Ich müsste 15 + 5 + 7 eingeben - um 13 zu bekommen

Wie könnte ich dieses Verhalten mehr Rechner-ish bekommen? Ähnlich dem eingebauten Windows-Rechner. Dies wird für einfache Geldberechnungen sein, so dass Multiplizieren und Dividieren oder andere zur Vereinfachung nicht zugelassen werden.

(function ($) { 
    $.fn.calcInMyBox = function (options) { 
     var settings = $.extend({ 
      decimalPlaces: 2 
     }, options); 

     return this.each(function() { 
      var calcHolder = 0.00; 
      var calcDisplay = ""; 

      $(this).keypress(function (e) { 
       //Prevent letters from being entered 
       var regex = new RegExp("^[0-9\.]+$"); 
       var key = String.fromCharCode(!e.charCode ? e.which : e.charCode); 
       if (!regex.test(key)) { e.preventDefault(); return false; } 
      }); 

      $(this).keydown(function (e) { 
       if (e.which == 27) { 
        //Escape Key To Clear 
        calcHolder = 0.00; 
        calcDisplay = ""; 
        $(".CalculatorData").html(""); 
        $(this).val(calcHolder.toFixed(settings.decimalPlaces)).select(); 
       } 
       if (e.which == 107) { 
        //Add Value 
        calcHolder = Number(this.value) + calcHolder; 
        $(".CalculatorData").html(calcDisplay + this.value + " + "); 
       } 
       else if (e.which == 109) { 
        //Subtract Value 
        calcHolder = calcHolder - Number(this.value); 
        $(".CalculatorData").html(calcDisplay + this.value + " - "); 
       } 
       if (e.which == 107 || e.which == 109) { 
        calcDisplay = $(".CalculatorData").html(); 
        $(this).val(calcHolder.toFixed(settings.decimalPlaces)).select(); 
        console.log(calcHolder); 
       } 
      }); 

     }); 
    }; 
})(jQuery); 

$(".jqNewAmount").calcInMyBox({ decimalPlaces: 2}); 

UPDATE:https://jsfiddle.net/Lusaj8kc/6/ War in der Lage pro Davids Vorschlag eval zu implementieren. Es platziert die Operationen außerhalb der Eingabe und ermittelt anhand dieser Daten die Antwort in der Eingabe. Tabulator- und Eingabeberechnung hinzugefügt.

Answer 1

Wäre es möglich, dass Sie einfach eval verwenden, so?

var $eq = $('#eq'); 
 
var $ans = $('#ans'); 
 

 
$eq.keyup(function(e) { 
 
    try{ 
 
    var ans = eval($eq.val()).toFixed(2); 
 
    $ans.val(ans); 
 
    } catch(e) { $ans.val(''); } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Equation: <input id="eq" /> 
 
<br> 
 
Answer: <input id="ans"/>

Answer 2

David784 Antwort der war direkt an wirklich. Man könnte erwägen, eine Fehlermeldung hinzuzufügen, die ausgelöst werden könnte, und die Ausführung würde mit einer Nachricht auf der Konsole fortgesetzt. Dann wäre die Benutzereingabe immer noch Junk. Außerdem könnte die Meldung "Bitte geben Sie eine Nummer ein" anstelle des vorgeschlagenen Leerzeichens angezeigt werden. Aber David784 hat die Marke getroffen, weil er erwartet hat, dass der Benutzer eine Nummer eingibt und nicht erklärt. Die JavaScript-Funktion .toFixed() hat den Rest erledigt!