我似乎找不到解决这个问题的方法.
我有一个像这样的简单输入字段.
<div class="search">
<input type="text" value="y u no work"/>
</div>?
Run Code Online (Sandbox Code Playgroud)
而我正试着focus()在一个函数内部.所以在随机函数内部(无论它是什么函数)我有这条线...
$('.search').find('input').focus();
Run Code Online (Sandbox Code Playgroud)
这对每个桌面都可以正常工作.
但它在我的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);?
Run Code Online (Sandbox Code Playgroud)
知道为什么focus()我的iPhone上的超时功能不起作用.
要查看实时示例,请在iPhone上测试此小提琴.http://jsfiddle.net/Hc4sT/
更新:
我创建了与我当前在当前项目中面临的完全相同的情况.
我有一个选择框应该 - 当"改变"时 - 将焦点设置到输入字段并滑入iphone或其他移动设备上的kexboard.我发现focus()设置正确但键盘没有出现.我需要键盘出现.
我在这里上传了测试文件http://cl.ly/1d210x1W3Y3W ...如果你在iphone上测试它,你可以看到键盘没有滑入.
在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">
//<
每个方块都有自己的输入字段.其中的原因是有时可以预先填充正方形.现在,在桌面浏览器上,只要输入字符,光标就会跳转到下一个输入字段.使用类似的东西很有效:
$(this).next('input').focus();
Run Code Online (Sandbox Code Playgroud)
但是移动safari(我们在ios上测试)的问题是我不知道如何以编程方式自动"跳转"到下一个输入字段.用户可以通过"下一步"按钮完成,但有没有办法自动执行此操作?
我知道focus()触发器对ios有一些限制,但我也看到了使用合成点击等的一些解决方法.
注意:由于与工作相关的更改,我无法再验证此处发布的答案.最有可能的是,我永远无法接受下面的答案.这里发布的信息对IMO很有用,所以我会保持原样.如果您认为自己知道答案,请随时回答,我们将让社区决定哪些是有用的.
背景
我正在为iPod Touch 开发一个独立的Web应用程序.我的一个要求是在页面加载时关注文本字段,以便用户可以连续地执行任务(例如,使用条形码阅读器).
问题
问题是它确实关注于有问题的文本字段,但键盘不会上升.这有解决方法吗?或者这是Apple的设计?
示例Html
我不确定如何将它放入代码片段,但这是我一直在尝试的地方:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/android-win-2-300x162.png">
<title>TESTING</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// javascript goes here
</script>
</head>
<body>
<section id="content">
<div class="container" style="margin-top: 50px;" >
<p>Testing textfield focus</p>
<form method="POST">
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control first-responder" />
</div>
<div class="col-xs-12">
<button type="submit" class="btn" style="width: 100%" …Run Code Online (Sandbox Code Playgroud) 我想在页面加载时专注于PhoneGap应用程序中的文本输入.我已经尝试过MooTools版本$('entry').focus();以及document.getElementById('entry').focus()DOM准备好了.
当在普通的Web浏览器中查看HTML页面时,这可以正常工作,但在运行PhoneGap的iPhone模拟器中,它不起作用.
有没有办法专注于强制虚拟键盘出现的iPhone的表单字段?
我已经尝试过 autoFocus 或 focus(),但似乎不起作用。
<textarea autoFocus />
or
<textarea ref="textarea" />
componentDidMount() {
findDOMNode(this.refs.textarea).focus();
}
Run Code Online (Sandbox Code Playgroud)
autoFocus似乎可以在 Chrome 中使用。
两者autoFocus foucs()都不适用于 iOS。