javascript - Windows 10 平板电脑浏览器 : soft keyboard very buggy

Question

我有一个平板电脑 html 应用程序。有些页面有 <input>和 <textarea>连同许多其他元素:链接、菜单、文本……

• 如果我不按任何<input>或 <textarea>一切正常
• 只要我按下一个输入元素，软键盘就会弹出(如预期的那样)。
• 输入一些文本并隐藏键盘后，每次我在网络应用程序上的任意位置单击时键盘都会再次弹出(即使在不可聚焦的元素中)

这完全破坏了体验，因为您被迫在始终显示键盘的情况下使用网络应用。

我尝试了很多不同的方法来操纵输入焦点，但都没有成功，比如调用 blur() , focus()以及聚焦组件、容器、窗口的相关方法......但似乎只是重新加载页面重置键盘状态以再次保持隐藏状态，直到点击可聚焦元素。

我的实验:

• 检查在 <INPUT> / <TEXTAREA> 之外按下导致焦点被移除:onblur()被调用，document.activeElement返回 NULL。

• 也试过手动blur() onchange 之后文档中的所有内容被触发:$("input,textarea").blur() .

• 尝试手动给出 focus()到带有 TABINDEX 的非交互式元素(hacky):

  <div id="dummyfocus" tabindex="0">
  $("#dummyfocus").focus()
  

• 我检查过虚拟元素确实获得了焦点，input/textarea注意力不集中，但即使在这种情况下，问题仍然存在。

在 Android 或 IOS 中，一切都按预期工作:如果没有 <input>，键盘将不会自动显示或 <textarea>是专注的。

有什么建议吗？有什么我没听说过的时髦的微软专有 css 标签吗？ :)

Answer 1

我有类似的问题，经过一些挖掘发现该问题可在 Microsoft Edge 浏览器(在 win10 uap 中用作渲染引擎)上重现。当点击任何地方事件元素变成 body 元素并且由于某种原因(可能是错误)键盘被激活，所以我在嵌套在 body 中的容器 div 上添加了 tabindex=0 ，所以当在任何焦点之外点击时 -能够使容器成为激活元素并且键盘弹出窗口不会被触发的元素。为了检查哪个元素被激活，我使用了这段代码

  document.body.addEventListener('click', function() {
    console.log(document.activeElement);
  });

希望这对您有所帮助。