0

I have the following markup where the user enters a PIN number. I am attempting to do something really basic to limit the user to 4 digits only.

This solution works fine in desktop browsers, however on mobiles (and spoofing mobile in a desktop browser) in my jQuery Mobile application there is no restriction and it is possible to enter more than 4 digits.

<input type="number" max="9999" min="1" maxlength="4" autocomplete="off" value="" class="tiny pin_number textbox" required="" name="payments[1872][pin]" pattern="\d+">

I have tried with and without the min and max attributes.

I am using a customised version of jQM v1.3.1

crmpicco
  • 16,605
  • 26
  • 134
  • 210

2 Answers2

0

Did you try the pattern attribute? Like this ?

<input pattern=".{3,}" required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

Ref: Is there a minlength validation attribute in HTML5?

Community
  • 1
  • 1
reignsly
  • 502
  • 4
  • 10
  • Thanks, I have tried that but `pattern=".{1,4}"` does not limit it to between 1 and 4 digits. – crmpicco Aug 20 '14 at 10:08
  • Hmp... What about the class textbox? Is that a regular class or you have something hidden with that? Not really sure why it's not working on mobile. – reignsly Aug 20 '14 at 10:16
  • I believe I have narrowed it down to the combination of using `type="number"` alongside `maxlength="4"`. They don't appear to work well together. I can change back to `type="text"` and it works fine, but then for mobile users they will see the QWERTY keyboard instead of the number keypad which isn't as nice UX experience. I can't see a solution for this other than some clunky JavaScript that has been offered above. – crmpicco Aug 20 '14 at 10:39
0

Since you are using jquery can you do this?

var $input = $('input')
$input.keyup(function(e) {
    var max = 5;
    if ($input.val().length > max) {
        $input.val($input.val().substr(0, max));
    }
});

Found it here : Enforcing the maxlength attribute on mobile browsers

Community
  • 1
  • 1
reignsly
  • 502
  • 4
  • 10
  • 1
    Thanks for the comment. Yes, this does work but it leaves the user with that clunky UX where the field is updated with the invalid entry and then the JS wipes it back. So you end up with 5 characters for a split-second and then it goes back down to 4. Changing it to a `keydown` has a similar effect as you can type to 4 characters and then anything you type after that overwrites the last character, again - not great UX. I'm quite surprised that the support for this is so poor on browsers, and it's not just mobile browsers. I am testing with FF on a desktop. – crmpicco Aug 20 '14 at 10:37