javascript - 当我使输入可见时，强制 iPhone 键盘出现在 Safari 窗口上
<p><p>从几年前 StackOverflow 中关于这个主题的许多评论来看，这可能根本不可能。但是，如果我遗漏了什么，情况如下:</p>
<p>我有一个 htmlCanvas 元素。当用户点击它时，我使输入元素可见。理想情况下，输入获得焦点，在移动设备上会弹出原生键盘。</p>
<p>这就是在 Android 设备上发生的事情。但是，当 Safari 上的 iPhone 用户点击 Canvas 时，输入会出现但它没有获得焦点，并且 native 键盘也不会出现。用户必须点击输入元素才能显示 native 键盘。</p>
<p>有没有人有办法让键盘在 iPhone 上显示而无需最后一次额外的点击？</p>
<p>这是一个测试用例:</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="box" style="width:100px;height:100px;position:relative;background-color:blue"></div>
<div id="holder">
<form>
<input id="in">
</form>
</div>
</body>
<script>
$(function() {
$("#holder").hide();
$("#box").mousedown(function() {
$("#holder").show({complete:function() {$("#in").focus();}});
});
});
</script>
</html>
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>找到了有效的策略组合。不知道为什么，但是如果我在“touchstart”而不是“mousedown”中处理点击，并添加一个对“focus”的额外调用，IOS 设备会授予我焦点和 native 键盘:</p>
<pre><code>$("#box").on("touchstart", function(e) {
$("#holder").show({complete:function() {$("#in").focus();}});
event.stopPropagation();
event.preventDefault();
$("#in").focus();
});
</code></pre></p>
<p style="font-size: 20px;">关于javascript - 当我使输入可见时，强制 iPhone 键盘出现在 Safari 窗口上，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/42163419/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/42163419/
</a>
</p>
页:
[1]