我有一个平板电脑 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 标签吗? :)
最佳答案
我有类似的问题,经过一些挖掘发现该问题可在 Microsoft Edge 浏览器(在 win10 uap 中用作渲染引擎)上重现。 当点击任何地方事件元素变成 body 元素并且由于某种原因(可能是错误)键盘被激活,所以我在嵌套在 body 中的容器 div 上添加了 tabindex=0 ,所以当在任何焦点之外点击时 -能够使容器成为激活元素并且键盘弹出窗口不会被触发的元素。 为了检查哪个元素被激活,我使用了这段代码
document.body.addEventListener('click', function() {
console.log(document.activeElement);
});
希望这对您有所帮助。
关于javascript - Windows 10 平板电脑浏览器 : soft keyboard very buggy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35374373/