使用 JavaScript 實作一個只接受數字並具備運算功能的文字框

在這個程式中唯一的文字方塊裡,你只能輸入數字和 + - * / % 等五個運算符號,如果你輸入一個正確的運算式,例如 100+100,在按下 Enter 之後,文字會執行運算並使用結果取代原來的數字。如果運算式有誤,則會以錯誤訊息取代(你也可以修改程式,把錯誤訊息改成空字串)...

 

我先把程式貼上來 -

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CheckKeyScript</title>
<script language='JavaScript' type='text/javascript'>
<!--
function checkKeyWithCalculation(obj, e) { 
 var evalResult;
 var key = window.event ? e.keyCode : e.which;
 var keychar = String.fromCharCode(key);
 if (keychar=='+' || keychar=='-' || keychar=='*' || keychar=='/' || keychar=='%' || keychar=='.' )
  return true;
 if (keychar==27) // ESC 清除
  obj.value = '';
 if (key==13) { // CR 進行運算
         if (obj.value=='') return false;
  else {
   try {
    evalResult = eval(obj.value);
    obj.value = evalResult;
   }
   catch(err) {
    obj.style.color = 'red';
    obj.value = '計算式錯誤!';
    obj.blur();
   }
   finally {
    return true;
   }
  }
 }
 if (key==8) // 倒退鍵
  return true;
 if (key==0) // TAB 鍵
  return true;
 if (key < 48 || key > 57) //其它所有非數字鍵
  return false; 
 else return true; 
}
-->
</script>
</head>
<body>
<input title="僅接受數字和運算式" onkeypress="return checkKeyWithCalculation(this, event);" id="ccNumberBox"  style='color:#808080;' />
</body>
</html>

由於程式本身很短,我就不仔細說明運作邏輯了。我用了「解決 FireFox 不支援 event.keyCode 的方法」這篇文章裡面的技巧來修改這個程式,否則原來的程式只能在 IE 裡運作,現在已經可以在 FireFox 正常執行了。

 

在這個程式中唯一的文字方塊裡,你只能輸入數字和 + - * / % 等五個運算符號,如果你輸入一個正確的運算式,例如 100+100,在按下 Enter 之後,文字會執行運算並使用結果取代原來的數字。如果運算式有誤,則會以錯誤訊息取代(你也可以修改程式,把錯誤訊息改成空字串)。

這個程式是在前端作業的,所以不會用到後端資源。但是如果你打算在伺服器端也使用這個功能, 那麼可以參考艾小克寫的「C# 版本的 Eval」一文。


Dev 2Share @ 點部落