从几年前 StackOverflow 中关于这个主题的许多评论来看,这可能根本不可能。但是,如果我遗漏了什么,情况如下:
我有一个 html Canvas 元素。当用户点击它时,我使输入元素可见。理想情况下,输入获得焦点,在移动设备上会弹出原生键盘。
这就是在 Android 设备上发生的事情。但是,当 Safari 上的 iPhone 用户点击 Canvas 时,输入会出现但它没有获得焦点,并且 native 键盘也不会出现。用户必须点击输入元素才能显示 native 键盘。
有没有人有办法让键盘在 iPhone 上显示而无需最后一次额外的点击?
这是一个测试用例:
<!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>
Best Answer-推荐答案 strong>
找到了有效的策略组合。不知道为什么,但是如果我在“touchstart”而不是“mousedown”中处理点击,并添加一个对“focus”的额外调用,IOS 设备会授予我焦点和 native 键盘:
$("#box").on("touchstart", function(e) {
$("#holder").show({complete:function() {$("#in").focus();}});
event.stopPropagation();
event.preventDefault();
$("#in").focus();
});
关于javascript - 当我使输入可见时,强制 iPhone 键盘出现在 Safari 窗口上,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/42163419/
|