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

Question

我想在页面加载时关注我的 HTML 表单中的第一个字段，我目前正在使用 <input autofocus='autofocus' /> 执行此操作.

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

---

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

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

这是我想要做的事情的一个例子。在移动设备上，顶部字段获得焦点但移动设备上未显示键盘: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 />