vaadin-number-field for phone number on mobile.

Flow
1

I need to accept a phone number (with a leading zero) on a mobile device.

As such I need to limit the device keyboard to the numeric keypad only.

We can’t use vaadin-number-field as it returns a double (and hence drops the leading zero).

Ideally we need to use vaadin-text-field but set the type to number as this limits the keypad on a mobile device.

I’ve had a look at the ‘part’ styling but of course this is an attribute not a style.

Is there someway to do this?

2

As far as I can tell, no (I’d be happy to be corrected, though). The way to toggle the numeric keypad on a mobile device is to use <input type="number">, and the [value type then is a Number]
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Value), meaning no leading zeroes.

3

Olli,
thanks for the response.

You notes sent my off digging again and I found there is actually an input type of ‘tel’

<input type='tel'></input>

This delivers the desired affect of having a mobile app open a numeric only key board and allows leading zeros.

So is there someway of forcing the vaadin-text-field to set the type to ‘tel’?

4

So I’ve hacked the vaadin-number-field and created a vaadin-tel-field.

I’ve attached it as a zip if other people have the requirement.

Note: I’ve used the Material themes and there are a couple of hard coded paths that would need to be fixed for anyone else’s dev environment.

Otherwise it seems to work nicely.

I will put in an enhancement request on git hub.

17606219.zip (3.01 KB)

5

Nice!

6

I don’t know if it’s working correctly on mobile but there is also an add-on for phone inputs.
https://vaadin.com/directory/component/textfield-formatter/

7

Jean,
looks like it won’t do the job as I don’t believe that it uses the ‘tel’ type.
This was the main criteria as it causes a mobile keyboard to only display numbers which greatly simplifies user input.

8

You can try the javascript library here: https://nosir.github.io/cleave.js/

It displays only numbers on my phone. I didn’t try the last version of the plugin but it should be ok.
If it does not work for the plugin, I think it’s quite easy to change it. (or add a ticket on github for enhancement)

If “tel” input is ok for you then you should use it :slight_smile:

9

There’s a cleave.js add-on in the directory, too: https://vaadin.com/directory/component/textfield-formatter

10

Yes textfield-formatter uses cleave.js (i thought I said that but I forgot :D).