我似乎找不到解决这个问题的方法。
我有一个像这样的简单输入字段。
<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上测试此小提琴。 http://jsfiddle.net/Hc4sT/
更新：
我创建了与我当前在当前项目中面临的完全相同的情况。
我有一个选择框应该 - 当“改变”时 - 将焦点设置到输入字段并滑入iphone或其他移动设备上的kexboard。我发现focus（）设置正确但键盘没有出现。我需要键盘出现。
我在这里上传了测试文件http://cl.ly/1d210x1W3Y3W ...如果你在iphone上测试它，你可以看到键盘没有滑入。
实际上，伙计们，还有一种方法。我努力想要为http://forstartersapp.com（在iPhone或iPad上试试）弄清楚这一点。
基本上，触摸屏设备上的Safari在focus()ing文本框方面很吝啬。如果你做click().focus()，甚至一些桌面浏览器也会做得更好。但触摸屏设备上Safari的设计者意识到，当键盘不断出现时，用户会感到烦恼，所以他们只能在以下条件下出现焦点：
1）用户点击了某处，并在执行click事件时调用了focus()。如果您正在进行AJAX调用，那么您必须同步执行它，例如使用jQuery中已弃用（但仍然可用）的$.ajax({async:false})选项。
2）此外 - 这一个让我忙碌了一段时间 - 如果其他一些文本框在当时聚焦的话，focus()似乎仍然不起作用。我有一个执行AJAX的“Go”按钮，所以我尝试在Go按钮的touchstart事件上模糊文本框，但这只是让键盘消失并在我有机会完成Go上的点击之前移动了视口按钮。最后，我尝试在Go按钮的touchend事件上模糊文本框，这就像一个魅力！
当您将＃1和＃2放在一起时，您将获得一个神奇的结果，通过将焦点放在您的密码字段中，使您的登录表单与所有蹩脚的Web登录表单区别开来，并让他们感觉更加原生。请享用！ :)
我最近遇到了同样的问题。我找到了一个显然适用于所有设备的解决方案。您不能以编程方式执行异步焦点，但是当其他输入已经集中时，您可以将焦点切换到目标输入。所以你需要做的是创建，隐藏，附加到DOM并将假输入集中在触发器事件上，并且当异步操作完成时，只需再次调用目标输入焦点。这是一个示例代码段 - 在您的手机上运行它。
编辑：
这是一个fiddle with the same code。显然你不能在手机上运行附加的片段（或者我做错了什么）。
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>WunderBart答案的原生javascript实现。
禁用自动缩放using font size。
function onClick() {
// create invisible dummy input to receive the focus first
const fakeInput = document.createElement('input')
fakeInput.setAttribute('type', 'text')
fakeInput.style.position = 'absolute'
fakeInput.style.opacity = 0
fakeInput.style.height = 0
fakeInput.style.fontSize = '16px' // disable auto zoom
// you may need to append to another element depending on the browser's auto
// zoom/scroll behavior
document.body.prepend(fakeInput)
// focus so that subsequent async focus will work
fakeInput.focus()
setTimeout(() => {
// now we can focus on the target input
targetInput.focus()
// cleanup
fakeInput.remove()
}, 1000)
}
我设法使用以下代码：
event.preventDefault();
timeout(function () {
$inputToFocus.focus();
}, 500);
我正在使用AngularJS，所以我创建了一个解决了我的问题的指令：
指示：
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，所以我不知道该指令是否有任何帮助。
我有一个带有图标的搜索表单，可以在单击时清除文本。然而，问题（在手机和平板电脑上）是键盘将崩溃/隐藏，因为click事件删除focus从input删除。
目标：清除搜索表单（点击/点击x-icon）后，保持键盘可见！
要做到这一点，请在事件上应用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工作正常，但无论如何这里是我的建议......
在Click事件的SetTimeOut函数中尝试以下代码行：
document.myInput.focus();
myInput与输入标记的name属性相关联。
<input name="myInput">
并使用此代码模糊字段：
document.activeElement.blur();
这个解决方案运行良好，我在手机上测试：
document.body.ontouchend = function() { document.querySelector('[name="name"]').focus(); };
请享用
请尝试使用on-tap而不是ng-click事件。我有这个问题。我通过在搜索表单标签中创建清晰搜索框按钮并通过点击取代按钮单击清除按钮来解决它。它现在工作正常。