Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,097
    Thanks
    15
    Thanked 1 Time in 1 Post

    MaxLength of textbox not restricted on jQuery Mobile application

    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.

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,713
    Thanks
    25
    Thanked 660 Times in 659 Posts
    It old school, but works:
    Added this to the input
    Code:
    onkeyup="opa(this.value);"
    id="problem"
    And wrote a javascript function:
    Code:
    <script type="text/javascript">
    function opa(len){
    	if(len.length > 4){
    		var val = len.substr(0, len.length-1);
    		document.getElementById('problem').value = val;
    	}
    }
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,097
    Thanks
    15
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,713
    Thanks
    25
    Thanked 660 Times in 659 Posts
    UX! Damn it Jim, I'm a programmer, not a designer.

    Don't know what to tell ya. Maybe size=4;?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •