2015-02-24 95 views
0

在我們的應用程序中,我們有許多輸入用於填寫學校成績。到現在爲止,我們已經HTML5:在type =「number」的輸入中輸入字符

<input type="text" name="mark"> 

我們正在嘗試使用HTML5的新特性,我們把它改爲

<input type="number" name="mark"> 

等移動/我們只用數字接口片。有這種情況。可以在「5+」等輸入等級中放置(例如,雙字母快捷鍵「ab」等)。它可以由用戶自定義。

有什麼辦法可以擴展輸入來處理數字和所有字符作爲有效WITH擴展Android/iOS的鍵盤佈局只有這樣?

編輯:

不要忘了,我想知道如果我能在移動擴展的鍵盤佈局。如果這是不可能的,我會回到文本驗證。

+0

相關http://stackoverflow.com/questions/27103646/html5-input-type-number-with-regex-pattern-in-mobile?rq=1 – 2015-02-28 20:14:40

回答

1

我相信你可以使用該模式的屬性,你所描述的:

的正則表達式控件的值與檢驗。該模式必須匹配整個值,而不僅僅是一些子集。使用title屬性來描述模式以幫助用戶。此屬性適用於type屬性值爲text,search,tel,url或email的情況;否則會被忽略。正則表達式語言與JavaScript的相同。該圖案未被正斜線包圍。

https://developer.mozilla.org/en/docs/Web/HTML/Element/Input

例如<input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">

將產生一個只允許3個字符的輸入元素。

不幸的是,我相信自定義鍵是不允許的,所以您將不得不使用具有上述屬性的數字模式的文本類型。

自定義鍵盤必須用於非標準鍵盤佈局/輸入按鈕。

+0

我會嘗試,但我認爲它將在adroid/iOS上顯示標準鍵盤並進行其他模式驗證。 – 2015-02-24 10:55:55

+0

W3schools告訴我,IOS不支持模板,也許它是最新版本,但要小心兼容性 – djkevino 2015-02-24 10:57:36

+1

@djkevino它確實不支持ios,很好的catch(http://caniuse.com/#search=模式) – Secret 2015-02-24 10:59:57

0

您可能只想使用普通文本字段,並使用類似JQuery驗證的方式來限制輸入並在用戶輸入錯誤數據時拋出警告。

另一種選擇是將所有可能的選項放到HTML選擇標籤中。

JQuery驗證插件:http://jqueryvalidation.org/

0

可以使用

<input type="text" name="mark" pattern="[a-z0-9]{2}"> 

您可以在模式指定的正則表達式和任何字符列入白名單

對於有50多個類型的輸入使用以下

<input type="text" name="mark" pattern="[0-9]{2}[+]?"> 
0

你可以簡單地se,

<input type="tel" name="mark"> 

這樣做。