在 JavaScript 中只輸入數字
Anika Tabassum Era
2023年1月30日
JavaScript 中沒有特定的方法或屬性可以直接使 HTML input 欄位僅採用 number 型別的值。相反，input 欄位有一個屬性 number，它只在輸入框中接受數字型別值。
執行僅過濾數字任務的另一種方法是將 input 欄位型別設定為 input，這意味著啟用幾乎所有可能的輸入。這會考慮字母數字值。
然後，JavaScript 程式碼中隱含的特定條件將過濾為僅接受數字。
在以下情況下，我們將使用 keypress 事件並獲取它的 keyCode。稍後，根據我們的動機，我們將設定一些條件來僅驗證數字型別的資料。
一個示例將具有 number 屬性，而另一個示例將具有輸入欄位的 input 屬性。
在 JavaScript 中使用欄位屬性 number 併為 keyCode 設定條件
我們的示例將有一個對應於 JavaScript 程式碼庫的輸入欄位。最初，我們將通過 event.keyCode 或 event.which 獲取 keyCode。
這個 keyCode 和 which 的工作方式因瀏覽器而異。因此，最終基於程式碼，我們將過濾值。
讓我們檢查一下程式碼。
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
輸出：
可以看出，我們按下了 a=65、b=66 和 c=67，但這些值沒有被接受。後來，值 4 和 2 被放置在輸入框中。
在 JavaScript 中使用欄位屬性 input 併為 keyCode 設定條件
我們將在此段中類似地為我們的輸入欄位設定 JavaScript 程式碼，但此屬性將設定為 input。預設情況下，Number 型別屬性接受數字並排除其他字元，但在 input 型別的情況下，我們將有權輸入其他字元，如退格、字母等。
在這裡，我們的 JavaScript 程式碼將驗證僅計算數字。
程式碼片段：
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
輸出：
