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延迟重新强制焦点，以及在没有运气的情况下触发（'焦点'）。

它不是一个问题的显示阻止，但只有数字小键盘会很好，因为它可以加快数据输入。

建议？

Answer 1

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

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

总是把球场放在那里，但要做得非常非常小。
旁边显示*。
当用户输入字段时，请使用真实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')。

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

2 个答案: