如何将 HTML 文本字段集中在 iPhone 上（导致键盘出现）？答案

【问题标题】：How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?如何将 HTML 文本字段集中在 iPhone 上（导致键盘出现）？
【发布时间】：2010-11-02 00:48:04
【问题描述】：

我正在编写一个 iPhone 网络应用程序，我想在页面加载时自动聚焦文本字段，从而调出键盘。常用的 Javascript：

input.focus();

似乎没有工作。有什么想法吗？

【问题讨论】：

标签： javascript iphone html

【解决方案1】：

只有当你从点击事件中触发焦点时它才会显示键盘，所以在页面上放置一个带有 onclick 焦点的按钮，它将显示键盘。除了验证之外完全没用（点击提交验证码专注于无效元素）

【讨论】：

什么意思？像这样的代码？ button.click = function() { button.focus(); }; document.body.onload = function() { button.click(); }; 但它不起作用。

【解决方案2】：

编辑：以下内容不再适用于 iOS - UIWebView 确实允许自动对焦和用于自动对焦的主屏幕链接，但他们在许多版本之前禁用了。

autofocus（见下文）属性不适用于 Mobile Safari 中的 url，但如果您是：

使用 UIWebView
使用主屏幕链接

输入的字体大小需要足够大以避免iOS10双击缩放（现在视口总是可缩放的）并设计页面大小以适应屏幕（否则在页面加载时你缩放时出现奇怪的计时/竞赛错误，或者如果可滚动字段有时无法正确居中屏幕）。

autofocus：用于执行此操作的 HTML5 规范是 autofocus property of the input tag。但是 iOS 忽略了这一点，大概是为了在导航到页面时不会弹出触摸键盘的更简洁的 UI。 Here 是一个演示自动对焦属性的页面。在 HTML5 之前，您会在 window.onload 事件中调用 element.focus()。但是，iOS 不支持 focus() 调用，除非在 onclick 事件处理期间。

【讨论】：

您的回答有些轻描淡写。 WkWebView 不会在输入字段上自动聚焦（它与安全原因有关）。

【解决方案3】：

注意：这个答案很旧，可能与新版本无关......

它对您没有帮助，但this 线程中的最后一张海报写道，这是 webkit 引擎的错误。
我不知道它是否是经过验证的错误...

way back machine 的最后一篇文章（因为原来的似乎不起作用）：

我正在用纯 XHTML MP / Ecmascript MP / WCSS 开发我的应用程序。所以使用本机平台浏览器控制 API 真的不是一个选项我。是的，你提到的行为和我的一样。我搜了他的 webkit.org 的 bugzilla 中的主题，发现这确实是一个报告错误。 focus() 到文本框会突出显示元素，但不提供克拉供用户开始输入文本。使用“peppe@peppe.net”提到的计时器也无济于事。

这种行为在平台（s60、iphone、android）中很常见，使用 webkit 引擎。

所以到目前为止，我还没有看到解决此问题的方法。

希望对你有帮助

【讨论】：

链接失效了，而且答案也没有提供任何实用信息。

【解决方案4】：

我有一个类似的问题，只是我的问题是焦点不会发生在“touchend”事件上。

http://jsfiddle.net/milosdakic/FNVm5/

以下代码可以在 Chrome/Safari 等中运行，但在 Mobile Safari 上会失败。让它工作的唯一方法是在“点击”时触发事件，但鉴于代码是为 iOS 设备编写的，它可以与触摸事件一起使用。

这似乎是 Webkit 引擎的一个错误。

【讨论】：

【解决方案5】：

如果您通过点击事件设置焦点，则需要 preventDefault 否则点击事件默认操作会将焦点设置在被点击的项目上。

【讨论】：

【解决方案6】：

也许有点晚，但对于未来的人来说也许。在我们在 iOS iPad（6 及更新版本）上运行的 webapp 中，我们以设定的时间间隔执行此操作：

startFocusOnTextField: function() {
        this.intervalIDForTextFieldFocus = window.setInterval(function() {
            document.getElementById(page.textInputFieldObj.id).focus();
        }, 150);
    },

在页面加载时调用（jQuery 移动环境）

【讨论】：

表单输入获得焦点（应用css样式），但键盘没有打开。

【解决方案7】：

这是一个解决方法：

setTimeout(function(){
    input.focus();
},500);//milliseconds

【讨论】：

我无法在运行 iOS 6.0.1 的 iPad 2 上使用此解决方法。