OGeek|极客世界-中国程序员成长平台

标题: javascript - 当我使输入可见时,强制 iPhone 键盘出现在 Safari 窗口上 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-11 18:55
标题: javascript - 当我使输入可见时,强制 iPhone 键盘出现在 Safari 窗口上

从几年前 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-推荐答案


找到了有效的策略组合。不知道为什么,但是如果我在“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/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/) Powered by Discuz! X3.4