2

I am trying to mask SSN input using jquery mask plugin, however it doesn't seem to play well with jquery mobile. The code is here. Appreciate any help.

If this doesnt work, what are the alternatives?

Also copied the code for reference below:

Scripts: 

jquery.mobile-1.0.1.min.css
jquery-1.6.4.min.js 
jquery.mobile-1.0.1.min.js

$("#ssnprimary").mask("999-99-9999");

HTML:

  <div data-role="page" id="mainpage">
    <div data-role="header">
      <h1> My Test </h1>
    </div><!-- /header -->

    <div data-role="content">
      <div class="content-primary">
        <form id="fmain" data-ajax="false">
          <!-- Primary SSN -->

          <div data-role="none">
            <label for="ssnprimary">SSN:</label> 
            <input type="tel" name="ssnprimary" id="ssnprimary" value="" />
          </div>
          </form>
         <br />
       </div><!-- /content -->
    </div><!-- /content -->

    <div data-role="footer"
      data-theme="d"></div><!-- /footer -->
  </div><!-- /page one -->
Kiran
  • 5,478
  • 13
  • 56
  • 84

2 Answers2

1

If using "Masked Input plugin for jQuery" from digitalbush.com the problem is the mobile device's browser is not triggering the keydown and/or keypress events the plugin relies on. Using the built-in browser on my Android 2.3 device and typing with the digital keyboard has no effect. The cursor just sits at the start of the input box and blinks.

SushiGuy
  • 1,573
  • 17
  • 20
1

You did not include the Javascript for the jQuery plugin to mask inputs.

I tried editing your fiddle but it is not showing the result. So I created a new fiddle: http://jsfiddle.net/7MhAU/

Jon Adams
  • 24,464
  • 18
  • 82
  • 120
user700284
  • 13,540
  • 8
  • 40
  • 74
  • Thanks, I did have it in my code and forgot to put it in fiddle. However, I just realized that I was calling the mask globally instead of pageshow and hence was not taking into affect as the DOM tree was not loaded by JQM. – Kiran Feb 07 '12 at 15:32