首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >当焦点从一个文本字段切换到另一个文本字段时,如何防止屏幕键盘消失

当焦点从一个文本字段切换到另一个文本字段时,如何防止屏幕键盘消失
EN

Stack Overflow用户
提问于 2013-11-29 23:14:28
回答 1查看 10.8K关注 0票数 4

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

在任何移动设备上测试时,我都会遇到问题。最初,我使用Safari或Chrome在iPad上试用了它。然而,后来我也在运行最新版本的Mobile Firefox的android设备上尝试了它,并遇到了同样的问题。

问题是,一旦输入元素发生变化,屏幕上的键盘就会消失。我尝试过几种不同的方法,但似乎总是产生相同的效果--只要我将焦点()放在不同的文本输入上,键盘就消失了。这对流程来说是一个严重的障碍,因为它需要一个额外的动作来正确地重新选择一个已经选择的文本字段,并且应该具有焦点并获得键盘输入。在手机这样的小型设备上,情况更糟,因为所有这些都伴随着缩放和平移,因为移除和重新显示键盘会导致页面重新呈现。这在严重程度上类似于当编辑文本文档时键盘停止工作并需要在每次按回车键时重新输入时发生的情况-这显然是一个关键问题。

下面的最小代码重现了这个问题:

代码语言:javascript
运行
AI代码解释
复制
<!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>

我注意到的第一件事是,虽然初始的focus()有效(元素变为红色),但屏幕上的键盘并没有出现。虽然这很麻烦,但最初点击文本字段并不是什么大问题。然而,只要我按下任何一个触发键(我在其中插入了一个普通字符以确认它是什么都无关紧要),键盘就会突然消失。这对我来说没有任何意义,不仅文本元素仍然是焦点,这需要屏幕上的键盘,而且是键盘事件改变了焦点,这表明键盘可能仍然需要-这不是我延迟或其他原因造成的。

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

如何防止屏幕上的键盘消失?我浪费了很多时间来尝试让这一关键功能发挥作用,但它仍然不起作用!有没有什么元标签是我需要加进去的?或者只是所有移动设备都有的普遍的、跨平台的bug

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-06 21:54:46

尝试在tf1.focus()之后或之后使用click()方法;

如下所示:

代码语言:javascript
运行
AI代码解释
复制
tf1.click();

这可能导致很少或根本没有软件键盘隐藏。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20294585

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档