在 HTML 中只允許數字輸入
本文將介紹幾種在 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>
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