作爲用戶輸入數字的Javascript計算器

我是Javascript的noob，但我試圖在我的網站上實現一些用戶可以輸入數量的內容，並且小計在輸入時動態更新。例如：如果商品是每件10美元，並且用戶在文本字段中鍵入5，我希望它在文本框旁邊顯示$ 50。很簡單的乘法，但我不知道如何用Javascript做到這一點。不知何故，我認爲onKeyPress？謝謝！作爲用戶輸入數字的Javascript計算器

來源

2010-09-21 RobHardgood

假設下面的HTML：

<input type="text" id="numberField"/> 
<span id="result"></span>

的JavaScript：

window.onload = function() { 
    var base = 10; 
    var numberField = document.getElementById('numberField'); 
    numberField.onkeyup = numberField.onpaste = function() { 
     if(this.value.length == 0) { 
     document.getElementById('result').innerHTML = ''; 
     return; 
     } 
     var number = parseInt(this.value); 
     if(isNaN(number)) return; 
     document.getElementById('result').innerHTML = number * base; 
    }; 
    numberField.onkeyup(); //could just as easily have been onpaste(); 
};

這裏有一個working example。

來源

2010-09-21 04:45:19

啊哈！這完美的作品！還有一件事，是否有一種方法可以在用戶輸入任何內容之前，爲文本字段中的默認值計算相同的內容？謝謝:) – RobHardgood 2010-09-21 05:04:37

@RobHardgood，我編輯了我的答案。試試吧，它應該工作。 – 2010-09-21 05:11:34

所以呢......再次感謝！ – RobHardgood 2010-09-21 05:19:23

您應該處理'onkeyup'和'onpaste'事件，以確保您通過鍵盤和剪貼板粘貼事件捕獲更改。

<input id='myinput' /> 
<script> 
    var myinput = document.getElementById('myinput'); 
    function changeHandler() { 
    // here, you can access the input value with 'myinput.value' or 'this.value' 
    } 
    myinput.onkeyup = myinput.onpaste = changeHandler; 
</script>

同樣，使用getElementById和元素的innerHTML屬性設置元素的內容時要顯示的結果。

來源

2010-09-21 04:44:22 sje397

是'onpaste'被認爲是標準嗎？ onchange可能是一個很好的選擇。 – lincolnk 2010-09-21 05:19:39

作爲用戶輸入數字的Javascript計算器

回答

相關問題