移动 Safari:输入字段上的 Javascript focus() 方法仅适用于单击? [英] Mobile Safari: Javascript focus() method on inputfield only works with click?

问题描述

我有一个像这样的简单输入字段.

<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();//在我的 iPhone 上运行良好 - 键盘滑入});设置超时(功能(){//警报('测试');//作品$('.search').find('input').focus();//不适用于我的 iPhone - 适用于桌面}, 5000);

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

要查看现场示例，请在您的 iPhone 上测试此小提琴.http://jsfiddle.net/Hc4sT/

更新:

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

我有一个选择框——当改变"时——将焦点设置到输入字段并滑入 iPhone 或其他移动设备上的 kexboard.我发现 focus() 设置正确，但键盘没有显示.我需要键盘出现.

解决方案

其实，伙计们，有办法.为了[链接已删除](在 iPhone 或 iPad 上尝试)，我费了很大力气才弄清楚这一点.

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

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

2) 此外——这个让我忙了一段时间——如果当时其他一些文本框被聚焦，focus() 似乎仍然不起作用.我有一个执行 AJAX 的Go"按钮，所以我尝试在 Go 按钮的 touchstart 事件上模糊文本框，但这只会让键盘消失并在我有机会之前移动视口以完成单击前往"按钮.最后，我尝试在 Go 按钮的 touchend 事件上模糊文本框，这就像一个魅力！

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

I have a simple input field like this.

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

And I'm trying to focus() it inside a function. So inside of a random function (doesn't matter what function it is) I have this line …

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

This works just fine on every Desktop whatsoever.

However it doesn't work on my iPhone. The field is not getting focused and the keyboard is not shown on my iPhone.

For testing purposes and to show you guys the problem I did a quick sample:

$('#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);​

Any idea why the focus() wouldn't work with the timeout function on my iPhone.

To see the live example, test this fiddle on your iPhone. http://jsfiddle.net/Hc4sT/

Update:

I created the exact same case as I'm currently facing in my current project.

I have a select-box that should — when "changed" — set the focus to the input field and slide-in the kexboard on the iphone or other mobile devices. I found out that the focus() is set correctly but the keyboard doesn't show up. I need the keyboard to show up.

解决方案

Actually, guys, there is a way. I struggled mightily to figure this out for [LINK REMOVED] (try it on an iPhone or iPad).

Basically, Safari on touchscreen devices is stingy when it comes to focus()ing textboxes. Even some desktop browsers do better if you do click().focus(). But the designers of Safari on touchscreen devices realized it's annoying to users when the keyboard keeps coming up, so they made the focus appear only on the following conditions:

1) The user clicked somewhere and focus() was called while executing the click event. If you are doing an AJAX call, then you must do it synchronously, such as with the deprecated (but still available) $.ajax({async:false}) option in jQuery.

2) Furthermore -- and this one kept me busy for a while -- focus() still doesn't seem to work if some other textbox is focused at the time. I had a "Go" button which did the AJAX, so I tried blurring the textbox on the touchstart event of the Go button, but that just made the keyboard disappear and moved the viewport before I had a chance to complete the click on the Go button. Finally I tried blurring the textbox on the touchend event of the Go button, and this worked like a charm!

When you put #1 and #2 together, you get a magical result that will set your login forms apart from all the crappy web login forms, by placing the focus in your password fields, and make them feel more native. Enjoy! :)

这篇关于移动 Safari:输入字段上的 Javascript focus() 方法仅适用于单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！