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

我有一个HTML5应用程序在Android平板电脑上运行，有几个输入字段使用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" />

我遇到的问题是，当第一次关注密码字段时，Android浏览器中会弹出完整的字母数字键盘，无论是单击输入字段还是切换到输入字段。用户必须单击现在可见的数字字段以弹出数字键盘。即使我在SSN可视数字字段上呼叫focus，完整的字母数字键盘仍保持不动

我想告诉浏览器切换到数字键盘。我尝试过一些事情，比如使用一个短暂的setTimeout延迟来重新强制聚焦，以及在没有运气的情况下在球场上触发“聚焦”

这并不是一个问题，但最好只有数字键盘，因为它会加快数据输入一点

---

建议？

直接设置属性：$el.attr'type'、'number'。

在我看来，避免这种情况的最简单方法是完全避免使用密码字段。我想我可能会用tabindex或类似于字段的样式来链接或跨越，然后用*s或其他什么填充它，然后链接变为活动的，然后用数字字段替换它。希望，由于链接不会触发键盘，用数字字段替换它并聚焦该字段将打开数字键盘

更新：不，那么至少在我的iPhone上，浏览器键盘上的下一个和上一个按钮不参与。因此，我的建议是：

总是有场地在那里，但是要把它弄得非常非常小。 将*显示在旁边。 当用户进入该字段时，用真实的SSN填充并展开它，隐藏显示元素。 当用户离开该字段时，清除该字段，使其再次变小，并更新显示元素。 当您需要提交表单时，请在提交前立即填写隐藏字段或类似字段。 下面是一个完全没有样式的示例，它可以在我的iPhone上正常工作：

|

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

---

jQuery抛出无法更改的未捕获类型属性错误。使用DOM文档更改它。getElementById'SSN_Pass'。setAttribute'type'，number'；仍然显示字母数字键盘。是的，一些浏览器不允许您更改类型。我在看您，Microsoft和其他浏览器对您更改类型时发生的情况不太一致，所以jQuery不允许更改，这样您就不会错误地感觉到它会起作用。效果非常好！我只是将jQuery代码调高了一点，以删除/添加基于焦点或模糊的“ssnHidden”类。我为“fakeSSN”范围连接了一个click处理程序，它将焦点设置为“realSSN”字段。如果我没有聚焦任何输入字段，没有显示键盘，并且我点击“fakeSSN”字段，它会调出字母数字键盘。如果我有一些其他领域的重点，如姓名或电子邮件地址，然后我点击'fakeSSN'或我的标签，通过'realSSN'，这是伟大的工作。这是一个带有安卓3.2 BTW的Galaxy标签10.1。@PeteNelson:太棒了！很高兴这有帮助。我可以接受。大多数情况下，用户都会在字段中使用Tab键。这是一个黑客，但这是一个很好的黑客谢谢你的解决方案TJ！

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