Inappropriate keyboard layout on iOS iPhone

[AlexanderKoehn]

OT: Thanks for this great vue component!

When using vue-numeric as currency input on iOS iPhone, the keyboard offered by iOS is suited for the 'tel' html input type, which is just numbers. Comma/Dot for currency input is missing. Android does have it. Since there is no other proper input type than 'text' to get a suitable keyboard, I'd propose to offer an enum for the input type (tel as default or text). Or one uses 'number', but then the currency symbol has to be rendered elsewhere.

[kevinongko]

Hi @AlexanderKoehn,

I'm currently doesn't have iOS device to try this, I'll keep this issue open and look into it in the future.

For those who want to use input type text, just pass the props

<vue-numeric type="text"><vue-numeric>

and the component will render the input with text type.

[mazipan]

Try using this snippet

<input type="tel" pattern="[0-9]*" />

@kevinongko

You can refer to : https://github.com/mazipan/vue-currency-filter/blob/master/App.vue

[mazipan]

Oh, I miss understood with the issue. Just forget my last comment 😂

[te1]

See also discussion here: https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes

In short: It's not possible right now. It may be in the future with the inputmode attribute but that isn't supported by any browser yet: https://caniuse.com/#feat=input-inputmode

For now you have to use type="text" which gives you the default keyboard, as suggested above.

Alternatively you could try to implement something with type="number" but it seems like a lot of work to get this to display the currency symbol and even the decimal separator is troublesome in some browsers.