在 JavaScript 中只輸入數字
Anika Tabassum Era
2023年1月30日
JavaScript
JavaScript Numbers
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>
輸出：
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
