Question

我希望在页面加载时将第一个字段集中在我的HTML表单中，并且我目前正在使用<input autofocus='autofocus' />执行此操作。

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

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

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

以下是我要做的事情的一个例子。在移动设备上，顶部字段已聚焦，但移动设备上未显示键盘：https://accounts.ft.com/login

Answer 1

这可以通过输入字段readonly，然后将超时设置为blur然后重新focus来实现，同时删除readonly属性

＆＃13;

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

＆＃13;

<input id='myInput' autofocus />

＆＃13;

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

1 个答案: