像计算器一样计算内部输入



在不显示计算器的情况下,我正在设置一个jQuery函数,以直接在输入中计算其类型。我很接近,加法例程工作正常。减法有点古怪,因为我正在尝试输入测试数据,它并不完全流动。

这是小提琴 - https://jsfiddle.net/Lusaj8kc/4/

因此,当我输入 15 + 5 + 7 + 时,我得到的答案是 27。我让加号键运行请求的操作有点不按顺序运行。由于它会自动显示结果,因此不需要输入键,无论如何我都想将输入键挂接到表单提交中。

如果我输入 15 + 5 - 7,我需要再次按 - 并首先从 3 中减去 15。我需要输入 15 + 5 + 7 - 才能得到 13

我怎样才能让它表现得更像计算器?类似于内置的Windows计算器。这将用于简单的货币计算,因此为了简单起见,不会允许乘除或其他方法。

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

更新:https://jsfiddle.net/Lusaj8kc/6/能够按照戴维斯的建议实施评估。它将操作置于输入之外,并评估该数据,将答案记录到输入中。添加了选项卡并输入键计算。

你可以像这样只使用eval吗?

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="one_answers"/>

David784的回答非常正确。 可以考虑添加可能引发的错误消息,并且执行将继续在控制台上显示消息。那么用户输入仍然是垃圾。 此外,可以显示添加"请输入数字"消息,而不是他建议的空白。 但是,David784 在期望用户输入一个数字而不是解释它方面达到了目标。javascript 函数 .toFixed() 完成了剩下的工作!

最新更新