Question

我有一个HTML5应用程序，它使用一些输入类型=“文本”字段来输入文本。我正在捕捉按键事件，以便将某些字段链接在一起。

在任何移动设备上测试时遇到问题。最初我在使用Safari或Chrome的iPad上试用过它。但是，后来我也尝试在运行最新版本的Mobile Firefox的Android设备上遇到同样的问题。

问题是输入元素一改变，屏幕键盘就会消失。我尝试过几种不同的方式，但似乎总是产生相同的效果 - 只要我将焦点（）放在不同的文本输入上，键盘就会消失。这代表了流量的严重障碍，因为它需要额外的动作来正确地重新选择已经被选择并且应该具有焦点并获得键盘输入的文本字段。在诸如电话之类的小型设备上，情况甚至更糟，因为所有这些都伴随着缩放和平移，因为键盘的移除和重新显示导致页面重新渲染。这与严重程度相似，如果一个人的键盘停止工作会发生什么，并且在编辑文本文档时每次击中时都需要重新插入 - 这显然是一个关键问题。

以下最小代码重现了该问题：

<!doctype html>
<html lang="en">
<head>
<style type="text/css">
  :focus { color: red; }
</style>

<script type="text/javascript">
function init() {
var tf1 = document.getElementById('tf1')
var tf2 = document.getElementById('tf2')
tf1.focus()                                                                                                                                         
tf1.onkeydown = function(evt) {
    if (evt.which == KeyEvent.DOM_VK_RETURN
        || evt.which == KeyEvent.DOM_VK_Q
        || evt.which == KeyEvent.DOM_VK_ENTER) {
        tf2.focus()
        if (evt.stopPropogation) evt.stopPropogation()
        if (evt.preventDefault) evt.preventDefault()
        return false
        }
    }
}
</script>
<body onload="init()">
<input type='text' id='tf1' value='field1' />
<input type='text' id='tf2' value='field2' />
</body>
</html>

我注意到的第一件事是，虽然初始焦点（）有效（元素变为红色），但屏幕键盘不会出现。虽然这很令人不安，但最初点击文本字段并不是一件大事。但是，只要按下任何一个触发键（我在那里抛出一个普通字符来确认它无关紧要），键盘就会突然消失。这对我没有任何意义，不仅是一个文本元素仍然聚焦，这需要屏幕键盘，但它是一个改变焦点的键盘事件，这表明可能仍然需要键盘 - 它是不像我是因为延迟或其他事情而这样做的。

我尝试过onkeydown，onkeyup和onkeypress - 都表现出相同的行为。

如何防止屏幕键盘消失？我浪费了很多时间试图让这一个关键的功能部分起作用，但它仍然没有！我需要包含什么类型的元标记吗？或者只是所有移动设备都具有的普遍存在的跨平台错误

Answer 1

尝试使用click()方法代替tf1.focus();

像这样：

tf1.click();

这可能导致软件键盘隐藏很少甚至没有。

当焦点从一个文本字段更改为另一个文本字段时，如何防止屏幕键盘消失

1 个答案: