String textfield, want numeric keypad

Vaadin 6 / 7 / 8
1

I have several TextFields each of which is configured with validators and other logic to behave exactly as I want. For example, if a user uses a leading “.” entering .2, the field will display 0.2 upon blur. Same with time of day 0130, with the important leading zero, is a convenient way to enter 01:30 as a time. I don’t want any zero stripping or any other behaviour I don’t command. So TextField suits my needs.

But I want to evoke the numeric keypad for mobile users. iOS users especially don’t like the extra keypress to get to the numbers keys. There is an html command, [described here]
(https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/), which would do the trick. Is there any way that a Vaadin developer can send html like that along with a component to trigger the desired input keypad?

2

Found a solution. The steps are:

  1. In the creation of a TextField, set a unique id using setId().
  2. Send the client side some Javascript referring to the TextField’s id to change the input type to “number”

JavaScript.getCurrent().execute("document.getElementById(\"" + theIDString + "\").type=\"number\"");

That way, all the string-oriented validators and other logic remain unchanged but the mobile devices get the number keypads for ease of data input.