2012-07-02 40 views
21

下面的代碼來自HTML表單。如果輸入應該是一個整數,我需要改變「型「?用於整數的HTML表單的輸入類型

<div class="friend2title"> 
    <label for="url">Add points:</label> 
</div> 
<div class="friend2field"> 
    <input name="state" type="text" id="state" maxlength="150"> 
</div> 
+0

您需要支持哪些瀏覽器版本? – Eric

回答

20

如果您使用HTML5,你應該使用的輸入型number。如果你使用XHTML或HTML 4 ,輸入類型應該是text

+0

然後驗證你確實*得到了*一個數字。是啊。 – uotonyh

+2

好的...如何判斷我是否使用HTML 5? – John

+2

@John你可以使用'number';它當然會失敗HTML 4驗證,但HTML 4瀏覽器會將其視爲「文本」類型。 – Neil

0

不,這不是輸入的數據類型,它指定type of control to create:。

類型=文字|密碼|複選框|無線電|提交|重置|文件|隱藏|圖像|按鈕[CI] 此屬性指定控件的類型ol來創建。此屬性的默認值是「文本」。

3

此前HTML5,輸入類型=「文本」僅僅意味着一個字段中插入自由文本,無論你希望它是什麼。這就是爲了保證用戶輸入有效數字而需要做的驗證工作

如果您使用的是HTML5,則可以使用新的輸入類型,其中之一是號碼,可自動驗證文本輸入,並強制它是一個數字

但請記住,如果你正在構建一個服務器端的應用程序(例如PHP),你仍然必須驗證那邊的輸入(確保它實際上是一個數字),因爲它很容易破解html並更改輸入類型,刪除瀏覽器驗證

-4

即使您想接受輸入的數字,我會推薦使用text類型。

<input type="text" name"some-number" /> 

客戶端運行一些jQuery驗證來驗證它是一個數字。

然後在你的服務器端代碼中運行一些驗證來驗證它實際上是一個數值。

19
<input type="number" step="1" ... 

通過添加step屬性,可將輸入限制爲整數。

當然,您應該始終在服務器上進行驗證。除了在嚴格控制的條件下,從客戶那裏收到的所有東西都需要視爲可疑。

+3

必須指出,這個答案僅對HTML5有效 –

+1

這不會阻止你手動輸入浮點數 –

+1

@PetrPeller它可能取決於。來自[MDN輸入號碼](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values)'允許十進制值 數字輸入的一個問題是他們的步驟默認大小爲1 - 如果您嘗試輸入帶小數的數字,例如「1.0」,則該數字將被視爲無效。如果要輸入一個需要小數的值,則需要在步數值中反映此值(例如,step =「0.01」以允許小數點到小數點後兩位)。這裏有一個簡單的例子:' – PhoneixS

9

這可能幫助:

<input type="number" step="1" pattern="\d+" /> 

step是爲了方便(並且可以設置爲另一個整數),但pattern做一些實際的強制執行措施。

請注意,由於pattern與整個表達式匹配,因此無需將其表示爲^\d+$

即使有這種向外緊正則表達式,Chrome和Firefox的實現,有趣的是允許e這裏(據推測爲科學記數法)以及-爲負數,而Chrome也允許.,而Firefox是在拒絕,除非更緊.後跟0。 (Firefox在輸入失敗時將該字段標記爲紅色,而Chrome不允許您首先輸入不允許的值。)

由於正如其他人所觀察到的,應該始終在服務器上進行驗證(或在客戶端,如果在客戶端使用本地值或希望阻止用戶往返服務器)。

+0

雖然Chrome並沒有在Firefox中添加'pattern',但確保任何小數部分的使用都會將該字段標記爲無效。 –