javascript - 用于数学输入的良好 HTML5 对象？

Question

为了获得 HTML5/JavaScript 学习体验，我想编写一个基本计算器。我需要知道的第一件事是输入类型方面有哪些选项仅支持数字字符，并且(如果可能)允许包含 + 和 -< 等运算符。最终结果是用户能够输入 0-9 值范围内的字符，以及 {+, -,/, *, ... }。

有没有什么东西是专门为这种事情量身定制的，或者至少可以调整为这种性质的东西？

Answer 1

这是使用 eval 和正则表达式的简单计算器:

HTML:

<input type="text" id="calc">
<button id="calculate">Calculate</button>

JavaScript:

var input = document.querySelector('#calc')
  , button = document.querySelector('#calculate');

// Only allow numbers and operators
input.addEventListener('keypress', function(e) {
  var key = String.fromCharCode(e.which);
  if (!/[0-9+\-/*]+/.test(key)) e.preventDefault();
});

button.addEventListener('click', function() {
  alert(input.value +' = '+ eval(input.value));
});

演示: http://jsbin.com/utujas/1/edit

有人说 eval 很邪恶，但对于一个简单的计算器来说它没问题，否则你就不得不求助于这样的东西:javascript calculator: plus sign alternatives