在Mobile Safari中,在设置延迟时间后,我无法将注意力集中在文本字段上.我附上一些展示问题的示例代码.如果单击该按钮,则触发.focus(),一切都按预期工作.如果你把焦点放在回调上,比如setTimeout函数,那么它只能在移动safari中失败.在所有其他浏览器中,有一个延迟,然后焦点发生.
令人困惑的是,即使在移动游猎中,也会触发"focusin"事件.这个(和SO中的〜类似〜评论)让我觉得它是一个移动的safari bug.任何指导都将被接受.
我已经在模拟器和iPhone 3GS/4 iOS4上进行了测试.
示例HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Autofocus tests</title>
<meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
</head>
<body>
<h1>
Show keyboard without user focus and select text:
</h1>
<p>
<button id='focus-test-button'>
Should focus on input when you click me after .5 second
</button>
<input id='focus-test-input' type='number' value='20'>
</p>
<script type="text/javascript">
//<![CDATA[
var button = document.getElementById('focus-test-button');
var input = document.getElementById('focus-test-input');
input.addEventListener('focusin', function(event) {
console.log('focus');
console.log(event);
});
button.addEventListener('click', function() {
// *** If …所以我已经看到很多关于iOS问题的线索,专注于输入/ textarea元素.(看这里和这里)似乎iOS不会让你手动专注于其中一个元素,并要求它是一个真正的点击/点击以专注于元素.
我已经尝试模拟点击,触发点击,只需点击()直接点击...各种各样的事情.
以下是我目前正在尝试实施的解决方法:
$scope.gotoElement = function(eID) {
// call $anchorScroll()
$scope.smoothScrollTo(eID).then(function() {
clickElement('#textarea');
});
}
function clickElement(e) {
$(e).on('touchstart', function() {
//$(e).val('touchstart');
$(e).focus();
});
$(e).trigger('touchstart');
}
你不需要担心滚动功能,我知道这有效,我已经测试了足够的.注释掉的$(e).val('touchstart')工作没有问题来改变textarea的文本,但是.focus()在iOS上不起作用.我已经在Android设备上测试了它,它工作正常,但在iOS上它只是没有调出键盘.有时它会开始调高键盘半秒钟然后再次消失.
我已经看过上面提到的其他线程了,我似乎无法弄清楚如何为此编写解决方法.
有任何想法吗？