HTML 5 class="numeric" pattern="[0-9]*" BREAKING PHONEGAP APP AFTER ENTERING TWO DIGITS AND HITTING DELETE BUTTON TWICE

Question

I have a Phonegap application that uses the html5 "tel" tag like so.

<input type="password"  id="inputPin1" name="inputPin1" 
class="numeric" pattern="[0-9]*" 
type="text" minlength="4" maxlength="4" tabindex="1" size="5" 
placeholder="4 digits only" autofocus   />

The problem is that after entering 2 digits or more then hitting the back button twice to delete the numbers entered it crashes the Phonegap app because it will not delete the first number entered. However if you only enter one digit and then hit back it works as expected. Two or more digits will delete every number but the first one, then crashes the application

If you used the tel with Phonegap let me know if this is a common issue or if I have something wrong in the above code.

If there is a fix that would be helpful too.

Thanks for your help in advanced.

Answer 1

first of all I don't know why this is happening, because it shouldn't happen.

I can propose a workaround, though: you can control the input via Javascript, capturing the event charCode and only acting when the user inputs a number, delete, navigating arrows and enter. And making changes to the input value

If you go with this method, don't forget to add an event.preventDefault(); to avoid the input take actions after your JS code.

Hope it helps