2

我有一个平板电脑的HTML应用程序。有些有<input>和许多其他元素一起<textarea>:链接,菜单,文本,...Windows 10平板电脑浏览器:软键盘很bug

  • 如果我不按任何<input><textarea>一切只要我按一个输入工作正常
  • 元素,软键盘弹出(如预期)。
  • 输入一些文字和隐藏键盘后,键盘再次弹出每次我点击web应用(即使在非可聚焦元素)

这完全破坏了经验,你是被迫的任何地方总是显示键盘使用网络应用程序。

我已经尝试了许多不同的方法来操纵输入焦点没有任何成功,就像调用了焦点的组件,集装箱,窗口blur()focus()和相关方法......但似乎只是重新加载页面键盘状态重置保持隐藏状态,直到点击可聚焦的元素。

我的实验:

  • 经过在按下<INPUT>/<TEXTAREA>以外时,被删除的焦点:onblur()被调用,并document.activeElement返回null。

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

  • 试图以手动给focus()到非交互式元件与TABINDEX(哈克):

    <div id="dummyfocus" tabindex="0"> 
    $("#dummyfocus").focus() 
    
  • 我检查,事实上,虚设元件接收对焦时,input/textarea unfocuses,但即使在这种情况下,问题依然存在。

在Android或IOS一切正常:键盘不会自动显示如果没有<input><textarea>集中。

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

回答

1

我有类似的问题,经过一些挖掘发现问题可重现的Microsoft Edge浏览器(用于win10 uap作为渲染引擎)。 当点击任何地方活动元素变成身体元素和由于某种原因(也许是bug)键盘被激活,所以我添加了tabindex = 0在集装箱div,它嵌套在正文,所以当点击任何可聚焦元素的容器成为激活的元素并且键盘弹出不被触发。 用于检查元件被激活我用这个代码

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

希望这有助于。

+0

感谢您的提示。我也发现了这种解决方法,但不幸的是,这并不能解决问题(你必须在DOM中的每个元素中添加'tabindex = x'''''''''''),即使在这种情况下,当你弹出键盘时,点击一个tabindexed元素。就像我研究过这个问题一样,我越来越相信它是一个(非常恼人的)错误:( – rupps

1

我设法通过添加以下内容来解决这个问题,如果您仍然感兴趣。添加一个虚拟控件来获得焦点,然后在离开文本区域时改变焦点。

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

+0

嘿,那真的很聪明!单选按钮会导致键盘隐藏,请尝试! – rupps

相关问题