I am trying to provide a mask so that the user can enter ssn in the format 999-99-9999. I tried using a hidden input plugin from a digital bush . This works fine on chrome and safari, but does not work on Android.
Problem: when entering numbers, this is normal to 123-, and when I enter the next 2 digits, it changes the sequence. for example: if I enter 123-45, it displays as 123-54, and this question continues for each separator. For example: if I enter 123-45-6789, it displays as 123-56-8974
I tried to write my own code, as shown below, to handle keystrokes and keystrokes and still get the same problem. Has anyone been successful with disguising input on Android? Which alternative?
Here is the full html with local code links:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> test ground</title> <script type="text/javascript" src="libs/jQuery/jQuery.min.js" ></script> <script type="text/javascript" src="libs/jQuery/mobile/jquery.mobile.min.js"></script> <link rel="stylesheet" href="libs/jQuery/mobile/jquery.mobile.min.css" /> <script src="javascript/jquery.maskedinput-1.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).bind('mobileinit',function(){ </script> </head> <body> <div data-role="page" id="launchpage"> <div id="header" data-role="header" data-position="fixed" > <div id="headerlogo" > </div> <h1 class="appTitle" >My App</h1> </div> <div data-role="content" > <div class="content-primary"> <p> Welcome to my app </p> <br/> </div> <div data-role="none"> <label name="lblprimaryssn" for="primaryssn" > SSN</label> <input type="text" name="primaryssn" id="primaryssn" value="" /> <span class="error" id="primaryssnerror"> Please enter your SSN as (999-99-9999) </span> </div> <br/> </div> </div> </body> </html>
Here is the code that I used to mask input based on a keystroke on a keyboard:
// _v is value passed in on keyup in this input field // _d indicates if the key is a backspace to delete character var setSSN = function (_v, _d){ var v = $.trim(_v); if ( !_d ){ if ( v.length <= 3 ) { var validformat1=/^\d{1,3}$/ ; if ( validformat1.test(v)) { if ( v.length == 3 ) v = v + '-'; return v; } } else if ( v.length >3 && v.length <= 6) { var validformat2=/^\d{3}\-\d{0,2}$/ ; if ( validformat2.test(v)) { if ( v.length == 6 ) v = v + '-'; return v; } } else { var validformat3=/^\d{3}\-\d{2}\-\d{0,4}$/ ; if ( validformat3.test(v)) { if ( v.length == 6 ) v = v + '-'; return v; } } v = v.substring(0,v.length-1); return v; } else { if ( 3 == v.length || 6 == v.length ) { v = v.substring(0,v.length-1); } } return v; }
Kiran source share