• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

javascript - 当我使输入可见时,强制 iPhone 键盘出现在 Safari 窗口上

[复制链接]
菜鸟教程小白 发表于 2022-12-11 18:55:11 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

从几年前 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/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap