Question

我有一个平板电脑HTML应用。有些页面包含<input>和<textarea>以及许多其他元素：链接，菜单，文字......

如果我没有按任何<input>或<textarea>一切正常
只要按下一个输入元素，就会弹出软键盘（正如预期的那样）。
输入一些文字并隐藏键盘后，每次点击webapp上的任意位置时，键盘都会再次弹出（即使在不可聚焦的元素中）

这完全破坏了体验，因为您不得不使用始终显示键盘的Web应用程序。

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

我的实验：

检查按下<INPUT> / <TEXTAREA>外部导致焦点被删除：onblur()被调用，document.activeElement返回NULL。
还尝试在触发blur()后手动onchange文档中的所有内容：$("input,textarea").blur()。
尝试使用TABINDEX（hacky）手动将focus()提供给非交互式元素：
```
<div id="dummyfocus" tabindex="0">
$("#dummyfocus").focus()
```
我检查过虚拟元素实际上是焦点，input/textarea是无关紧要的，但即使在这种情况下，问题仍然存在。

在Android或IOS中，一切都按预期工作：如果没有关注<input>或<textarea>，键盘将无法自动显示。

有什么建议吗？我还没有听说过任何时髦的微软专有css标签？：）

Answer 1

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

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

希望这有帮助。

Answer 2

如果您仍然感兴趣，我设法通过添加以下内容来解决此问题。添加了一个虚拟控件来获取焦点，然后在远离文本区域时更改焦点。

＆＃13;

$("body").click(function () {
    $("#radioDummy").focus();
});
$("#MyTextArea").click(function (e) {
    e.stopPropagation();
});

＆＃13;

Answer 3

在Windows 10上使用键盘时，似乎问题出在touchstart事件。当您隐藏键盘时（例如，按键盘上的关闭按钮（x）），输入字段仍然具有焦点。当你按其他地方时，键盘会再次弹出。但是，长按任意一次（长按）将从输入中移除焦点，而不是再次显示键盘。这让我想到，问题可以解决挂钩touchstart事件，阻止事件传播，并从输入中删除焦点。

我在我的主@HostListener内创建了一个全局AppComponent，用于侦听touchstart个事件。单击正文时，停止事件的传播，并调用document.activeElement.blur()（松散焦点）。

@HostListener('document:touchstart', ['$event'])
globalTouchEvent(event) {
    if (event) event.stopPropagation();
    document.activeElement.blur();
}

我创建了一个Stackblitz，您可以使用Windows 10平板电脑进行测试。

Windows 10平板电脑浏览器：软键盘非常错误

3 个答案: