在 HTML 中只允許數字輸入

Sushant Poudel 2023年2月19日 2022年4月22日
  1. 在 HTML 中在 input 標籤中使用 type="number" 只允許數字輸入
  2. 在 HTML 中在 JavaScript 中編寫客戶端驗證以僅允許輸入數字
在 HTML 中只允許數字輸入

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

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

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

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

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

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

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

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

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

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

因此,要新增一些驗證,我們可以禁用文字區域中的拖放和貼上操作。例如,在 input 標籤中寫入 ondroponpaste 屬性並寫入 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>=48event.charCode<=57,如下例所示。然後,在 input 標記的末尾寫入 required 屬性。

在下面的例子中,4857 分別是 09 的 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>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn