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が、単純な電卓では問題ありません。そうでなければ、次のようなものに頼る必要があります。