javascript - 移动版 Safari : Javascript focus() method on inputfield only works with click?

Question

我有一个像这样的简单输入框。

<div class="search">
   <input type="text" value="y u no work"/>
</div>​

我正在尝试在一个函数中 focus() 它。 所以在随机函数内部(不管它是什么函数)我有这一行......

$('.search').find('input').focus();

这在任何桌面上都能正常工作。

但是它在我的 iPhone 上不起作用。该字段未获得焦点，我的 iPhone 上未显示键盘。

出于测试目的并向大家展示问题，我做了一个快速示例:

$('#some-test-element').click(function() {
  $('.search').find('input').focus(); // works well on my iPhone - Keyboard slides in
});

setTimeout(function() {
  //alert('test'); //works
  $('.search').find('input').focus(); // doesn't work on my iPhone - works on Desktop
}, 5000);​

知道为什么 focus() 不能在我的 iPhone 上使用超时功能。

要查看实时示例，请在您的 iPhone 上测试此 fiddle 。 http://jsfiddle.net/Hc4sT/

更新:

我创建的案例与我目前在当前项目中面临的案例完全相同。

我有一个选择框，当“更改”时，它应该将焦点设置到输入字段并滑入 iphone 或其他移动设备上的 kexboard。我发现 focus() 设置正确但键盘没有显示。我需要键盘才能显示。

Answer 1

其实，伙计们，有办法的。我费了好大劲才想出 [链接已删除](在 iPhone 或 iPad 上试试)。

基本上，触摸屏设备上的 Safari 在 focus()ing 文本框方面很吝啬。如果您执行 click().focus()，甚至某些桌面浏览器也会做得更好。但是触摸屏设备上的 Safari 的设计者意识到当键盘不断出现时用户会很烦，所以他们只在以下情况下才会出现焦点:

1) 用户点击某处，在执行点击事件时调用了focus()。如果您正在进行 AJAX 调用，那么您必须同步进行，例如使用已弃用(但仍然可用)的 $.ajax({async:false}) 选项在 jQuery 中。

2) 此外——这个让我忙了一会儿——如果其他文本框当时处于焦点状态，focus() 似乎仍然不起作用。我有一个执行 AJAX 的“Go”按钮，所以我尝试在 Go 按钮的 touchstart 事件上模糊文本框，但这只会让键盘消失并在我有机会之前移动视口(viewport)完成点击 Go 按钮。最后，我尝试在 Go 按钮的 touchend 事件上模糊文本框，这非常有效!

当您将#1 和#2 放在一起时，您会得到一个神奇的结果，它将您的登录表单与所有蹩脚的 Web 登录表单区分开来，通过将焦点放在您的密码字段中，并使它们感觉更原生。享受! :)