2010-07-30 66 views
19

我嘗試了<input type="number" />,但在Opera上輸出一個奇怪的輸入框,加上一個「上下」處理程序。我期望的是一個常規的文本字段,一旦你注意到它,就會提示數字鍵盤而不是字母。這甚至有可能嗎?什麼輸入字段類型強制數字鍵盤移動鍵盤聚焦時出現?

p.s.我沒有試圖驗證。這將是一個不錯的用戶體驗,就是這樣。

回答

13

type =「number」是HTML5和許多手機不支持HTML5。 對於通話鏈接,您可以使用type =「tel」或 <A href="wtai://wp/mc;600112233">Special A</A>。 你也應該看看CSS WAP extensions (page 56)

編輯10/2015:
大多數,如果不是所有智能手機都支持HTML5和CSS3,那麼type="number"是最好的方法。

+0

我讀了那個文檔,沒有任何東西讓數字鍵盤提示instad字母表,所以它看起來不像將來對web開發人員有任何希望:( 我會把它作爲最終答案 – Ayyash 2010-07-31 03:05:59

+0

@Ayyash,sry我想想我與輸入和一個混淆。無論如何input type =「number」是HTML5。你可以使用iPhone和Android手機,我希望在未來的諾基亞瀏覽器。 – fravelgue 2010-08-02 09:13:34

19

官方HTML5的方式來處理電話號碼是:

<input type="tel"> 

你可能不喜歡的「怪輸入框中輸入」你當你使用<input type="number" />使用Opera了,但是這確實是合適類型的輸入當你想要求訪問者輸入一個數字值的區域。

+0

但「type = number」沒有提示數字鍵盤,我會嘗試使用Opera Mobile 10上的opera 10來調用電話類型 – Ayyash 2010-07-31 02:12:07

+0

,我認爲它有一些HTML5,我知道我看過 work, input type didnt work though – Ayyash 2010-07-31 02:54:38

+0

The 'type="number"' attribute isn't necessarily supposed to bring up a number pad. The question is: are you trying to force users to enter in a numeric value, or enter in a phone number? For the former, 'type="number"' is what you want. For the latter, 'type="tel"' (the telephone keypad, including # and *) is what you're looking for. '' isn't an input field; it's a link to dial a phone number. Example: '1-408-555-5555'。 – Dori 2010-07-31 05:01:56

10

該帖子現在是無效的。所有智能手機現在都支持HTML5和CSS3,因此添加type =「number」實際上會提示數字鍵盤彈出。我剛剛在2個不同的Android版本和iPhone上進行了檢查。就是這樣,將來沒有人會嘗試WAP而不是正確的HTML5格式。

+6

根據我的測試,'type ='number''用iOS上可見的數字拉起全鍵盤,而'type ='tel''拉起數字鍵盤,這似乎是海報所問的。在Android上,'number'和'tel'都會拉起數字鍵盤。 – Stan 2016-01-29 18:54:34

20

使用pattern="[0-9]*"

  • 例數輸入:<input type="number" pattern="[0-9]*" />

  • 例手機輸入:<input type="tel" pattern="[0-9]*" />

注:不支持type="tel"瀏覽器將默認爲文本鍵入

當心:使用type="number"導致某些瀏覽器和信用卡,郵政編碼的用戶體驗,並且電話輸入其中一個用戶可能需要輸入標點符號或逗號輸出是問題。

參考文獻:

+2

這是最好的和最當前的答案。感謝您的筆記和鏈接,兩者都非常有益。 – 2015-10-12 23:48:56

0

嘗試<input type="number" pattern="/d*"> OR <input type="tel" pattern="/d*"> 這將幫助,如果你與Android合作。

相關問題