移动Safari浏览器：输入字段上的JavaScript焦点（）方法只适用于点击？ [英] Mobile Safari: Javascript focus() method on inputfield only works with click?

问题描述

我有一个简单的输入字段。

 < div class =search> 
< input type =textvalue =y u no work/> 
< / div> 
  

我试着 focus（）它在一个函数里面。
所以在一个随机函数里（不管它是什么函数）我都有这一行...

$ $ p $ $ $ $ $ $ $ $ $ （ '.search '）发现（' 输入'）聚焦（）;

这在任何桌面上都可以运行。

然而，它不适用于我的iPhone。该字段没有得到关注，键盘也没有显示在我的iPhone上。

出于测试目的，向您展示问题我做了一个快速示例：

  $（'＃some-test-element'）。click（function（）{
 $（'。search'） .find（'input'）。focus（）; //适用于我的iPhone  - 键盘幻灯片
}）; 
 $ b setTimeout（function（）{
 // alert（'test'）; // works 
 $（'。search'）。find（'input'）。focus （）; //不能在我的iPhone上工作 - 在桌面上运行
}，5000）; 
  

任何想法为什么焦点（）不能用于我的iPhone的超时功能。

<看到现场的例子，在iPhone上测试这个小提琴。 http://jsfiddle.net/Hc4sT/

更新：

我创建了与当前项目中当前面对的完全相同的大小写。

我有一个选择框，应该 - 当更改 - 将焦点设置到输入字段并滑入iphone或其他移动设备上的kexboard。我发现焦点（）设置正确，但键盘不显示。我需要显示键盘。

我在这里上传了测试文件 http://cl.ly/1d210x1W3Y3W ...如果你在iPhone上测试这个，你可以看到键盘没有滑入。

解决方案

其实，伙计们，有一个办法。我很努力地想出了 http://forstartersapp.com （在iPhone或iPad上试用）。

基本上，触摸屏设备上的Safari对于 focus（）文本框是非常吝啬的。如果您执行 click（）。focus（），则即使是某些桌面浏览器也会更好。但是，触屏设备上的Safari的设计者意识到当键盘不断出现时，用户很烦恼，所以他们只会在以下情况下出现焦点：$ b​​
$ b

1）用户点击某处，执行click事件时调用了 focus（）。如果您正在进行AJAX调用，那么您必须同步执行此操作，例如不赞成使用（但仍然可用） $。ajax（{async：false}） code code $ c $>
$ b

2）此外 - 这个让我忙了一段时间 - focus（） / code>如果其他文本框在当时是关注的话，它似乎仍然不起作用。我有一个去按钮，做的AJAX，所以我试图模糊的Go按钮的 touchstart 事件的文本框，但只是使键盘消失，并移动在我有机会完成点击Go按钮之前的视口。最后，我试着在Go按钮的 touchend 事件上模糊了文本框，这就像一个魅力！



当你把＃1和＃2放在一起，你会得到一个神奇的结果，将您的登录表单从所有蹩脚的Web登录表单，通过把焦点放在你的密码字段，让他们感觉更本土。请享用！ ：）


I can't seem to find a solution for this problem.

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.

I uploaded the testfiles right here http://cl.ly/1d210x1W3Y3W … If you test this on the iphone you can see that the keyboard doesn't slide-in.

解决方案

Actually, guys, there is a way. I struggled mightily to figure this out for http://forstartersapp.com (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焦点（）方法只适用于点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！