在 type=password/type=number 和平板电脑上提示输入数字键盘之间切换

Question

我有一个在 Android 平板电脑上运行的 HTML5 应用程序，其中有几个使用 type=number 的输入字段。当这些字段获得焦点时，数字键盘会按预期弹出。

其中一个字段是收集客户的社会安全号码。我们的要求是，该字段必须在聚焦时显示完整的 SSN，在模糊时显示点。我已经用两个 SSN 字段实现了这一点。一种是输入类型=密码，一种是输入类型=数字，默认隐藏。

<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" />

我有 jQuery，它在获得焦点时隐藏密码字段并显示数字字段。模糊数字字段会将值复制回密码字段。

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

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

我遇到的问题是，当第一次在密码字段上获得焦点时，Android 浏览器中会弹出完整的字母数字键盘，无论是单击输入字段还是切换到它。用户必须单击现在可见的数字字段才能弹出数字键盘。即使我在 SSN 可见数字字段上调用 ​​focus()，完整的字母数字键盘仍然存在。

我想通过某种方式告诉浏览器切换到数字键盘。我已经尝试了一些方法，例如使用短暂的 setTimeout 延迟重新强制焦点以及在现场没有运气的 trigger('focus')。

这不是问题的关键，但最好只有数字键盘，因为它会加快数据输入速度。

建议？

Answer 1

在我看来，避免这种情况的最简单方法是完全避免使用密码字段。我想我可能会链接或span（使用tabindex）或一些样式看起来像一个字段并用*s 或其他内容填充它，然后链接变为活动状态，然后用数字替换它场地。希望由于链接不会触发键盘，将其替换为数字字段并聚焦该字段将打开数字键盘。

更新：不，那不参与浏览器键盘中的“下一个”和“上一个”按钮（至少在我的 iPhone 上没有）。所以我的备用方案是：

• 总是有场地，但要做得非常非常小。
• 在其旁边显示*s。
• 当用户进入该字段时，用真实的 SSN 填充并展开它，隐藏显示元素。
• 当用户离开该字段时，将其清除，再次变小，然后更新显示元素。
• 当您需要提交表单时，请在提交前立即填写隐藏字段或类似字段。

这是一个完全没有样式的示例，可以在我的 iPhone 上按需要运行：

Live copy | Live source

HTML（其他字段仅用于上下文）：

<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);
  }
});

Answer 2

直接设置属性：$(el).attr('type', 'number')。