2013-06-11 1 views
0

HTML5/JavaScript 학습 경험을 위해 기본 계산기를 작성하고 싶습니다. 가장 먼저 알아야 할 사항은 숫자 형식 만 지원하는 입력 유형에 어떤 옵션이 있는지 그리고 가능한 경우 +-과 같은 연산자를 포함시킬 수 있는지 여부입니다. 최종 결과는 사용자가 0-9의 값 범위와 {+, -, /, *, ... }의 문자를 입력 할 수있게됩니다.수학 입력에 적합한 HTML5 개체입니까?

자연적으로 이런 종류의 것에 맞춰 지거나, 최소한 그 자연의 것으로 조정할 수있는 것이 있습니까?

는 HTML :

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

자바 스크립트 :

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

일부는말

+0

예,'eval'과 정규식이 있습니다. 그렇게해야합니다. – elclanrs

답변

2

여기 eval 및 정규식을 사용하여 간단한 계산기입니다은 사악하지만 단순한 계산기에서는 괜찮습니다. 그렇지 않으면 다음과 같은 것에 의지해야합니다. javascript calculator: plus sign alternatives

+0

'if (!/[0-9 + \ -/*] + /. test (key))'를 사용하면'eval'이 완벽하게 잘됩니다 :) – Ian

관련 문제