如何在页面加载时自动聚焦文本表单字段，但在移动设备上隐藏软键盘？

Question

我想将 HTML 表单中的第一个字段集中在页面加载上，我目前正在使用<input autofocus='autofocus' />.

当我在移动设备上查看页面时，软键盘覆盖了提交按钮，这与我遵循的设计不符。如何让该键盘保持隐藏状态，直到用户再次点击该字段？

---

我希望该字段专注于页面加载，以便桌面用户可以立即开始在该字段中输入内容。移动用户只需点击该字段一次即可调出软键盘。

我们没有使用任何类型的用户代理嗅探，也没有使用视口宽度来确定哪些浏览器将具有软键盘。

这是我想要做的事情的一个例子。在移动设备上，顶部字段获得焦点，但移动设备上不显示键盘： https: //accounts.ft.com/login

Answer 1

这可以通过创建输入字段readonly，然后设置超时blur然后重新focus打开它，以及删除该readonly属性来实现。

el = document.getElementById('myInput');
hideKeyboard(el);

function hideKeyboard(el) {
  var att = document.createAttribute("readonly");
  el.setAttributeNode(att); // Force keyboard to hide on input field.
  setTimeout(function() {
    el.blur(); //close the keyboard
    el.focus(); //focus on the input
    // Remove readonly attribute after keyboard is hidden.
    el.removeAttribute('readonly');
  }, 100);
}

<input id='myInput' autofocus />