Question

I have an HTML5 app running on an Android tablet with several input fields using type=number. The numeric keypad pops up as-expected when these fields gain focus.

One of these fields is collecting the customer’s social security number. Our requirements say that the field must show the full SSN when focused and dots when blurred. I’ve implemented this with two SSN fields. One is input type=password, one is input type=number and is hidden by default.

<input type="password" name="SSN_Pass" id="SSN_Pass" value="" placeholder="SSN" />
<input type="number" name="SSN" id="SSN" value="" maxlength="9" class="required number" />

I have jQuery that hides the password field when it gains focus and shows the number field. Blurring the number field copies the value back to the password field.

$("#SSN_Pass").focus(function()
{
    $(this).hide();
    $("#SSN").show().focus();
});

$("#SSN").blur(function ()
{
    $(this).hide();
    $("#SSN_Pass").show().val($(this).val());
});

The problem I’m having is that the full alpha-numeric keyboard pops up in the Android’s browser when the focus is first gained on the password field, either when clicking the input field or tabbing to it. The user has to click the now-visible number field to make the numeric keypad pop up. Even though I’m calling focus() on the SSN visible number field, the full alpha-numeric keypad stays up.

I’d like some way to tell browser to switch to the numeric keypad. I’ve tried a couple things like re-forcing focus using a brief setTimeout delay as well as trigger(‘focus’) on the field with no luck.

It’s not a show-stopper of an issue, but it would be nice to only have the numeric keypad since it would speed up data entry a bit.

Suggestions?

Answer 1

It seems to me the simplest way to avoid this is to avoid having the password field at all. I think I’d probably link or span (with tabindex) or something styled to look like a field and fill it in with *s or whatever, and then the link becomes active, then replace it with the number field. Hopefully, since the link wouldn’t trigger the keyboard, replacing it with a number field and focussing that field would open the numeric keypad.

Update: No, then that doesn’t participate in the “next” and “previous” buttons in the browser’s keypad (at least, not on my iPhone). So my backup proposal is:

• Always have the field there, but make it very, very small.
• Have the *s displayed next to it.
• When the user enters the field, fill it with the real SSN and expand it, hiding the display element.
• When the user leaves the field, clear it, make it small again, and update the display element.
• When you need to submit the form, immediately prior to submission, fill in a hidden field or similar.

Here’s a completely un-styled example, which works as desired on my iPhone:

Live copy | Live source

HTML (other fields are just for context):

<input type="text" id="someTextField" value="Just some field" style="width: 20em">
<br><span id="fakeSSN">***-**-****</span><input type="number" id="realSSN" style="width:1px">
<br><input type="text" value="Some other field" style="width: 20em">

JavaScript:

jQuery(function($) {
  var ssn = "";

  $("#realSSN")
    .focus(function() {
      $("#fakeSSN").hide();
      $(this).css("width", "20em").val(ssn);
    })
    .blur(function() {
      var $this = $(this);
      ssn = $this.val();
      $this.val("").css("width", "1px");
      $("#fakeSSN").show();
    });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});