移动Safari浏览器：input字段上的JavaScript焦点（）方法只适用于点击？
我似乎无法find解决这个问题的方法。
我有这样一个简单的input字段。
<div class="search"> <input type="text" value="yu no work"/> </div> 我试图把它focus()在一个函数内。 所以里面的一个随机函数（无所谓是什么函数）我有这个线…
$('.search').find('input').focus();
这在任何桌面上都能正常工作。
但是，它不适用于我的iPhone。 该领域没有得到专注，键盘没有显示在我的iPhone上。
为了testing目的，并向你们展示问题，我做了一个快速示例：
$('#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超时function。
要查看实例，请在iPhone上testing这个小提琴。 http://jsfiddle.net/Hc4sT/
更新：
我创build了与我目前在当前项目中所面对的完全相同的案例。
我有一个select框应该 – 当“更改” – 将焦点设置到input字段，并滑动iphone或其他移动设备上的kexboard。 我发现焦点（）设置正确，但键盘不显示。 我需要显示键盘。
我在这里上传了testing文件http://cl.ly/1d210x1W3Y3W …如果你在iphone上testing，你可以看到键盘没有滑入。
其实，伙计们，有一个办法。 我苦苦争取http://forstartersapp.com （在iPhone或iPad上试用）。
基本上，触摸屏设备上的Safari对focus()文本框是吝啬的。 即使一些桌面浏览器做了click().focus() 。 但是触屏设备上的Safaridevise师们在键盘不断出现的时候就意识到了用户的烦恼，所以他们只把焦点放在以下几个条件上：
1）用户点击某处，执行click事件时调用focus() 。 如果您正在进行AJAX调用，那么您必须同步执行此操作，例如jQuery中的弃用（但仍然可用） $.ajax({async:false})选项。
2）此外 – 这一个让我忙了一会儿 – focus()仍然似乎没有工作，如果其他文本框在当时的重点。 我有一个“去”button，做了AJAX，所以我试图在Gobutton的touchstart事件上模糊文本框，但这只是使键盘消失，移动视口之前，我有机会完成点击Gobutton。 最后，我试着在Gobutton的touchend事件上模糊了文本框，这就像一个魅力！
当你把＃1和＃2放在一起，你会得到一个神奇的结果，将您的login表单从所有蹩脚的Weblogin表单，通过把焦点放在你的密码字段，让他们感觉更本土。 请享用！ 🙂
我有一个图标的search表单，单击时清除文本。 但是，问题（在手机和平板电脑上）是键盘会崩溃/隐藏，因为click事件删除focus被从input中删除。
目标 ：清除search表单（点击/点击x图标）后， 保持键盘可见 ！
要做到这一点，请在事件上应用stopPropagation() ，如下所示：
function clear ($event) { $event.preventDefault(); $event.stopPropagation(); self.query = ''; $timeout(function () { document.getElementById('sidebar-search').focus(); }, 1); }
和HTML表单：
<form ng-controller="SearchController as search" ng-submit="search.submit($event)"> <input type="search" id="sidebar-search" ng-model="search.query"> <span class="glyphicon glyphicon-remove-circle" ng-click="search.clear($event)"> </span> </form>
UPDATE
我也试过这个，但无济于事：
$(document).ready(function() { $('body :not(.wr-dropdown)').bind("click", function(e) { $('.test').focus(); }) $('.wr-dropdown').on('change', function(e) { if ($(".wr-dropdow option[value='/search']")) { setTimeout(function(e) { $('body :not(.wr-dropdown)').trigger("click"); },3000) } });
}）;
我很困惑，为什么你说这是行不通的，因为你的JSFiddle工作正常，但这里是我的build议呢？
在您的Click事件的SetTimeOut函数中尝试下面这行代码：
document.myInput.focus();
myInput与input标签的名称属性相关。
<input name="myInput">
并使用此代码来模糊该字段：
document.activeElement.blur();
我设法使它与以下代码一起工作：
event.preventDefault(); timeout(function () { $inputToFocus.focus(); }, 500);
我正在使用AngularJS，所以我创build了一个解决我的问题的指令：
指示：
angular.module('directivesModule').directive('focusOnClear', [ '$timeout', function (timeout) { return { restrict: 'A', link: function (scope, element, attrs) { var id = attrs.focusOnClear; var $inputSearchElement = $(element).parent().find('#' + id); element.on('click', function (event) { event.preventDefault(); timeout(function () { $inputSearchElement.focus(); }, 500); }); } }; } ]);
如何使用指令：
<div> <input type="search" id="search"> <i class="icon-clear" ng-click="clearSearchTerm()" focus-on-clear="search"></i> </div>
看起来你正在使用jQuery，所以我不知道这个指令是否有帮助。
这个解决scheme效果很好，我在我的手机上testing过：
document.body.ontouchend = function() { document.querySelector('[name="name"]').focus(); };
请享用
我最近面临同样的问题。 我发现一个解决scheme，显然适用于所有设备。 您不能以编程方式进行asynchronous聚焦，但是当某个其他input已经聚焦时，您可以将焦点切换到目标input。 所以你需要做的是创build，隐藏，追加到DOM上，并在触发事件上集中一个假input，当asynchronous操作完成时，只需在目标input上再次调用焦点。 这是一个示例代码片段 – 在您的手机上运行它。
编辑：
这是一个相同的代码小提琴 。 显然你不能在手机上运行附加的代码片断（或者我做错了什么）。
var $triggerCheckbox = $("#trigger-checkbox"); var $targetInput = $("#target-input"); // Create fake & invisible input var $fakeInput = $("<input type='text' />") .css({ position: "absolute", width: $targetInput.outerWidth(), // zoom properly (iOS) height: 0, // hide cursor (font-size: 0 will zoom to quarks level) (iOS) opacity: 0, // make input transparent :] }); var delay = 2000; // That's crazy long, but good as an example $triggerCheckbox.on("change", function(event) { // Disable input when unchecking trigger checkbox (presentational purpose) if (!event.target.checked) { return $targetInput .attr("disabled", true) .attr("placeholder", "I'm disabled"); } // Prepend to target input container and focus fake input $fakeInput.prependTo("#container").focus(); // Update placeholder (presentational purpose) $targetInput.attr("placeholder", "Wait for it..."); // setTimeout, fetch or any async action will work setTimeout(function() { // Shift focus to target input $targetInput .attr("disabled", false) .attr("placeholder", "I'm alive!") .focus(); // Remove fake input - no need to keep it in DOM $fakeInput.remove(); }, delay); });
label { display: block; margin-top: 20px; } input { box-sizing: border-box; font-size: inherit; } #container { position: relative; } #target-input { width: 250px; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="container"> <input type="text" id="target-input" placeholder="I'm disabled" /> <label> <input type="checkbox" id="trigger-checkbox" /> focus with setTimetout </label> </div>
请尝试使用on-tap而不是ng-click事件。 我有这个问题。 我通过在search表单标签内部清除search框button来解决这个问题，并通过点击取代了ng-click清除button。 现在工作正常。
