3

HTML5: Input additional characters with type = & ldquo; Number & rdquo;

 2 years ago
source link: https://www.codesd.com/item/html5-input-additional-characters-with-type-number.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

HTML5: Input additional characters with type = & ldquo; Number & rdquo;

advertisements

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.


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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK