q-inpt type number showed as a type text

  • I have a problem with an input from type number, that behaves like an input of type text.
    On my iPhone I can write text and all special character in this input.

    screenshot from website on my iPhone:

    screenshot from my app:

    So please Help!

  • Is this Safari? If yes, it’s the way Safari handles number inputs.

    If you only need positive integers without any thousands , you could try a fix with the attribute pattern="[0-9]*", which will only give the user a numeric 0-9 keyboard on an iPhone. In other words, they simply can’t input anything else.

    Or, you could set up an event catch to prevent any keys being added to the input value other than proper numeric ones.

    Something like this: https://codepen.io/smolinari/pen/MNoyvr

    Note though, it doesn’t pop up a number keyboard. And, strangely enough, if you add type=number, Safari then allows characters anyway. I have no clue why. Safari is the new IE. 😁


  • Thank you that worked for me!!

Log in to reply