0

In our app, we have many inputs that are used to fill in school grades. Till now we had

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

As we're trying to use new features of HTML5, we changed it to

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

so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.

Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?

EDIT:

Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.

Paweł Tomkiel
  • 1,974
  • 2
  • 21
  • 39

4 Answers4

1

I believe you can use the pattern attribute for what you described:

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.

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

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

will result in an input element that allows only 3 characters.

Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.

Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.

Secret
  • 3,291
  • 3
  • 32
  • 50
  • I'll try that, but i assume that it would show standard keyboard on adroid/iOS with additional pattern validation. – Paweł Tomkiel Feb 24 '15 at 10:55
  • W3schools tells me that patern isn't supported on IOS, maybe it is a the newest version but be careful with compatibility – djkevino Feb 24 '15 at 10:57
  • 1
    @djkevino It is indeed not supported in ios, good catch (http://caniuse.com/#search=pattern) – Secret Feb 24 '15 at 10:59
  • I just read apples documentation and they say it is supported but it would probably be recently added. (https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html) – djkevino Feb 24 '15 at 11:03
  • You're right, there's no way to customize keyboard layout with my markup – Paweł Tomkiel Mar 07 '15 at 15:16
0

You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.

Another option would be to trow all possible option into a HTML select tag.

JQuery Validate plugin: http://jqueryvalidation.org/

djkevino
  • 264
  • 2
  • 16
0

you can use 

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

You can specify your regular expression in the pattern and have any character whitelisted

For having 50+ kind of input use the following

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

You could simply use, 

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

This would do it.

Nasik Shafeek
  • 951
  • 8
  • 17