Search code examples
javascriptjqueryhtmlangularjskeyboard

Mobile numeric keyboard [0-9] in textarea


Is it possible to open up the mobile numeric keyboard in a textarea box?

The typical pattern="[0-9]*" does not seem to work with a textarea and I can't find any other information on this anywhere else. I am trying to get this working in an angular app, so is there some way to preventDefault() on the default keyboard and somehow trigger the numeric keyboard?

e.g.

<textarea id="searchBox" pattern="[0-9]*" ng-model="searchParams.searchString" rows="3" ng-blur="formatSearch()"></textarea>

Solution

  • Unfortunately this is not yet possible for textarea. I have searched exhaustively on this and tried many varietions of pattern and types and so on but it just is not supported for textarea.

    There are two possible solutions, either you can create your own html5 custom soft keyboard and apply a trick not to open the default keyboard.

    Or (more elegant I think) use a normal input with type number or type tel and attach an onkeyup listerer. When enter is pressed, you process the line into your textarea and clean plus refocus the input.