2015-02-24 93 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"> 

这样做。