資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何僅允許輸入正數
<input> 標籤為使用者指定了一個數據輸入欄位。它是表單中最關鍵的元素。它用於設計用於收集使用者資料的線上表單的互動式控制元件。根據type 屬性，它可以以多種方式顯示。由於輸入型別和屬性組合的數量眾多，它是 HTML 中功能最強大和最複雜的工具之一。
<input> 型別
type 屬性指示將顯示的 <input> 元素的型別。如果未指定 type 屬性，則預設型別為“text”。語法如下所示。
<input type="value">
其他一些輸入型別包括 button、submit、image、password、date、number、time 等。
其他屬性：由於其屬性，<input> 元素非常強大，其中 type 屬性是最重要的一個。因為每個 <input> 元素，無論其型別如何，都實現了HTMLInputElement 介面，所以它們都具有相同的屬性集。但是，大多數屬性僅對輸入型別的一個子集有效。此外，某些屬性影響輸入的方式取決於輸入型別，不同的輸入型別受到的影響方式也不同。
以下是一些輸入型別及其屬性組合的示例
input 的height 和width 屬性定義了 <input type="image"> 元素的高度和寬度。
<input type="image" src="demo.png" height="45" width="35" >
input 的step 屬性指定了輸入欄位的合法數字區間。對於 step=3，數字模式將為 0、3、6、9…
<input type="number" name="multiplesof3" step="3">
input 的size 屬性定義了輸入欄位的可見寬度（以字元為單位）。size 引數預設為 20。size 屬性與文字、搜尋、電話、網址、電子郵件和密碼等輸入型別相容。
<input type="text" size="14">
輸入型別 Number
number 輸入型別建立一個用於輸入數值的輸入欄位。預設情況下，它允許使用者手動或透過輸入區域右側的上下箭頭輸入負數和正數。
以下屬性可以幫助我們對 number 輸入型別進行限制。
max - 指定可以輸入的最大值
min - 指定可以輸入的最小值
step - 指定合法的數字區間
value - 指定預設值
如我們所知，<input type="number"> 指定了一個用於輸入數字的欄位。為了限制輸入欄位只接受正數，我們可以使用以下方法。
使用 HTML 輸入的 ‘min’ 屬性
它指定了允許的值範圍內最小的負值。如果輸入到元素中的值小於此值，則約束驗證失敗。如果 min 屬性值不是數字，則元素沒有最小值。此值必須小於或等於最大屬性值。如果將 ‘min’ 值設定為零，則只允許正數。
示例
以下示例描述了使用 ‘min’ 屬性在輸入欄位中僅允許正數。
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" value="5">
</body>
</html>
以上示例僅透過上下箭頭限制了負數，但仍然可以手動輸入負數，因此這並不能完全解決我們的問題。
使用 JavaScript
為了防止輸入負數，我們必須包含 onkeypress 屬性並使用一些 JavaScript。當用戶按下生成字元值的鍵時，會發生此事件。這些包括標點符號、數字和字母鍵。導致 onkeypress 事件發生的鍵的 Unicode 字元程式碼由 charCode 屬性返回。這非常輕量級，因為它可以直接放置在 HTML 中。當按下某個鍵時，JavaScript 會判斷它是否為數字以及它是否為正數。
示例
以下程式碼展示瞭如何透過新增 onkeypress 屬性來限制 charCode 屬性的負數。
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
</body>
</html>
使用 ‘oninput’ 屬性
此方法限制了透過箭頭輸入的負數，也防止了手動輸入負數，從而完全解決了問題。
‘onkeypress’ 屬性的替代方法是 ‘oninput’ 屬性。當用戶輸入值 (oninput) 時，它要麼有效 (validity.valid)，要麼被替換為空字串 (value=") 。
示例
以下程式碼使用 oninput 屬性來限制負值。
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" oninput="validity.valid||(value='');">
</body>
</html>
總而言之，可以使用 ‘min’ 屬性以及 ‘onkeypress’/’oninput’ 屬性和少量的 JavaScript 來在輸入欄位中僅允許正數。
13K+ 瀏覽量
