使用jquery自动计算HTML输入值

Question

我有以下Html

1

和jquery

<input class="top-display" value="5+5" id="display" disabled="disabled"> </input>
<button class="btn" > submit </button>

fiddle Here 我对这段代码的关注是让jquery自动为我做数学运算。而不是jquery警告“5 + 5”它应警告“10”。如果值=“5-5”则应警告“0”;不添加任何if语句。

Answer 1

您可以使用eval（）

  

eval（）方法评估表示为字符串的JavaScript代码。

将您的代码更改为：

$('.btn').click(function(){
    var selected = eval($('#display').val());
    alert(selected);
});

另请注意：

  

eval（）是一个危险的函数，它执行它以调用者的权限传递的代码。

在MDN上阅读更多信息，了解涉及 eval 的风险。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

Answer 2

Updated Fiddle

$('.btn').click(function(){
    var selected = $('#display').val();
    alert(eval(selected));
});

请勿忘记添加正确的错误处理，以避免在兼容值的情况下出现错误。

修改 eval函数已知security vulnerabilities。始终建议不要使用它。

$('.btn').click(function(){
    var selected = $('#display').val();
    alert(evil(selected));
});

function evil(fn) {
    return new Function('return ' + fn)();
}

这是我在another thread中找到的另一种解决方案。

Answer 3

您获得5 + 5警报的原因是因为您的表达方式是＆＃39;没有执行。其中eval（args）将执行参数。

Answer 4

只要您像下面一样清理输入字符串，就可以使用

eval（）：

$('.btn').click(function(){
    // strip anything other than digits, (), -+/* and .
    var selected = $('#display').val().replace(/[^-()\d/*+.]/g, '');
    alert(eval(selected ));
});

您还可以参考this thread了解 eval（）的其他替代方法。已经详细讨论了使用 eval（）的安全风险here。

干杯！

编辑：更新了小提琴链接here进行测试。