在 HTML 中只允許數字輸入

1. 在 HTML 中在 input 標籤中使用 type="number" 只允許數字輸入
2. 在 HTML 中在 JavaScript 中編寫客戶端驗證以僅允許輸入數字

本文將介紹幾種在 HTML 的文字輸入欄位中只允許數字輸入的方法。

在 HTML 中在 input 標籤中使用 type="number" 只允許數字輸入

在 HTML 中，我們使用 input 標籤來獲取使用者的輸入。

我們可以使用 input 標籤中的 type 屬性指定輸入型別。input 標籤接受各種輸入型別，如文字、數字、密碼、電子郵件等。

我們可以使用 type 屬性來只允許 HTML 中的數字輸入。例如，建立一個 type 屬性為 number 的 input 標籤。

接下來，建立一個提交按鈕。當我們輸入任何字元而不是數字時，將不會提交表單。

但是，不同瀏覽器的行為是不同的。

在 Firefox 中，下面的示例允許在輸入區域中進行任何輸入。但是它不允許在單擊按鈕時提交值。

在 Chrome 的情況下，它不允許輸入任何其他字元，而不是數字字元。Firefox 允許貼上其他輸入，但 Chrome 不允許。

例如，如果我們複製一些隨機文字並將其貼上到 Firefox 的輸入區域，文字將被貼上，但在 Chrome 中不會發生這種情況。將內容拖放到文字區域時，此行為也是相同的。

因此，要新增一些驗證，我們可以禁用文字區域中的拖放和貼上操作。例如，在 input 標籤中寫入 ondrop 和 onpaste 屬性並寫入 return false; 作為他們的價值觀。

通過這樣做，文字區域中的複製貼上和拖放功能將被禁用。

示例程式碼：

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

在 HTML 中在 JavaScript 中編寫客戶端驗證以僅允許輸入數字

雖然上述方法並非在所有瀏覽器中都能完美執行，但需要新增一些客戶端驗證以允許在文字區域中僅鍵入數字值。為此，我們需要編寫一些 JavaScript。

我們需要新增這樣的驗證，其中只能接受來自值 0-9 的輸入。為此，我們在 JavaScript 中有一個事件 onkeypress。

onkeypress 事件在使用者按下鍵時執行。在 onkeypress 事件中，我們只能返回 0-9 之間的值。

我們可以使用 charCode 屬性來獲取按下輸入的字元程式碼。

例如，將 onkeypress 事件寫為 input 標記中的屬性。

在屬性內部，使用 && 運算子返回語句 event.charCode>=48 和 event.charCode<=57，如下例所示。然後，在 input 標記的末尾寫入 required 屬性。

在下面的例子中，48 和 57 分別是 0 和 9 的 Unicode 字元程式碼。JavaScript 只會返回 0-9 的值。

這就是我們如何使用 onkeypress 事件和 charCode 屬性來只允許在 HTML 中輸入數字。

示例程式碼：

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>