Brett10
(Brett Sutton)
April 10, 2019, 5:46am
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?
ollit.1
(Olli Tietäväinen)
April 10, 2019, 5:54pm
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.
Brett10
(Brett Sutton)
April 11, 2019, 1:06am
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’?
Brett10
(Brett Sutton)
April 11, 2019, 2:22am
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)
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/
Brett10
(Brett Sutton)
April 12, 2019, 8:43am
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.
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
ollit.1
(Olli Tietäväinen)
April 12, 2019, 9:25am
9
Yes textfield-formatter uses cleave.js (i thought I said that but I forgot :D).