iPad HTML 焦点答案

【问题标题】：iPad HTML FocusiPad HTML 焦点
【发布时间】：2011-08-24 02:56:45
【问题描述】：

我在将文本字段聚焦在 iPad 上时遇到问题。我在哪里使用：

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

焦点设置到文本区域，并出现一个键盘。然而，当使用 touchend 调用时，focusTextArea 不会被调用并且键盘不可见。我的focusTextArea 函数是：

function focusTextArea() {
    $('#textArea').focus();
}

有人知道为什么会发生这种情况，以及我如何才能让它发挥作用吗？

TIA，

亚当

【问题讨论】：

【解决方案1】：

很遗憾，iPad 无法对焦。将焦点放在所需字段的唯一方法是用户“点击”所需字段。

2015-01-08 更新：

正如this answer Matt 中所述：

... iOS 将只允许在其他元素上触发焦点，从在函数内，如果调用堆栈中的第一个函数是由非编程事件触发。在你的情况下，调用 setTimeout 启动新的调用栈，安全机制启动 in 以防止您将焦点设置在输入上。

【讨论】：

此外，在任何元素的 onclick 事件中，您都可以调用 focus() 到另一个输入。
不完全正确：如果焦点是在另一个 INPUT 字段上的单击事件的回调中触发的，这实际上是有效的（除非您之间有一个动画似乎再次中断了此选项... ）。所以是的，它确实（不）起作用，有点：P
有任何支持 Bob 的参考资料吗？我亲身了解焦点无法正常工作。我只是想知道 Apple 自己是否对此说过任何话。

【解决方案2】：

对不起各位，我想我得给你们带来一个坏消息:-)

关于“如何使用 CLICK Handler 关注 IPAD 上的输入字段？”的问题太多了。太多的答案并没有真正的帮助......

坏消息，不是真正的消息，是不可能的，因为被聚焦的元素会再次失去焦点，而被点击的段落的操作有待完成。

上面的例子在这里再解释一下

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

的意思： 1. 专注于文档 2.触发点击事件（关注textarea） 3. 回到文档（文档再次获得焦点） 4.完成点击事件，文档失去焦点。

现在是好消息！

最终的解决方案（用原生互联网应用、firefox 和 chrome 测试 iPhone、iPad 和 android）是：改用 touchend 或 mouseup ！

$(document).bind("touchend",function(event) {
    alert('click');
    focusTextArea();
});

或

$(document).bind("mouseup",function(event) {
    alert('click');
    focusTextArea();
});

结合jquery插件

* jQuery Browser Plugin v0.0.6
* https://github.com/gabceb/jquery-browser-plugin

我正在使用一个小脚本来检测平台（移动或非移动平台）并设置正确的点击处理程序以供以后使用。

var clickevent = '';
if ($.browser.mobile) clickevent = 'touchend';
else clickevent = 'click';

现在我可以使用以下内容了

$(document).bind(clickevent,function(event) {
    alert('click');
    focusTextArea();
});

适用于台式机和移动设备。

希望这会有所帮助:-)

【讨论】：

【解决方案3】：

您应该尝试fastclick js，应该可以。检查this 示例（同时发布here）。

我还制作了这个jsfiddle example，它似乎可以在 iPad（Chrome 和 Safari）上运行。

希望这会有所帮助。

【讨论】：