如何让移动浏览器(iOS、Android 中的 webkit)显示其软键盘

2023-12-29

我正在编写一个小型 Web 应用程序,它大量使用 canvas 元素来执行类似于 VNC 的操作。它特别针对 iOS 和 Android 的默认浏览器。

我可以通过 AJAX 调用检测何时需要键盘输入,但我无法说服移动浏览器按需显示其软键盘。我的想法是有一个输入字段,也许隐藏在画布后面,我可以在适当的时候给予焦点,然后监听该输入字段上的关键事件。

问题是,当它来自“后台”时,即在 AJAX 调用的成功处理程序上,这似乎不起作用。这是一个独立的测试用例(需要 jQuery,并使用安装在/focus)显示焦点在来自移动浏览器时如何不会弹出移动浏览器的键盘setTimeout延迟或 AJAX 调用的返回。有什么办法可以让键盘有效弹出吗?

<html>
<head>
<title>Focus Test V1</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>

<div>
<form method="GET" onsubmit='return false;'>
<input type="text" id="kb" />
</form>
</div>

<div>
<button id="focus-direct">Focus Directly</button>
<button id="focus-timeout"">Focus Timeout</button>
<button id="focus-ajax">Focus Ajax</button>
<button id="clear">Clear</button>
</div>

<div id="console"></div>

<script type="text/javascript">
    function init() {
        function append(text) {
            $('<div/>').text(text).appendTo('#console');
        }
        $('#clear').click(function() {
            $('#console').html("");
        });
        $('#focus-direct').click(function() {
            focusKB();
        });
        $('#focus-timeout').click(function() {
            setTimeout(focusKB(), 50);
        });
        $('#focus-ajax').click(function() {
            append("sending...");
            $.ajax( {
                url : '/focus',
                success : function() {
                    append("ajax returned...");
                    focusKB();
                }
            });
        });

        function focusKB() {
            $('#kb').focus();
            append("focusing...");
        }

        setTimeout(focusKB, 3000);
    }
    $(document).ready(init);
</script>

</body>
</html>

不幸的是,在大多数情况下,系统会测试用户是否触发该事件(例如单击)以显示软件键盘。这使得无法按需显示软键盘。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让移动浏览器(iOS、Android 中的 webkit)显示其软键盘 的相关文章

  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 在 iPhone 3GS 与 iPhone 4 上为 Mobile Safari 嵌入 HTML5 视频

    我在服务器上的 mp4 文件中有 H 264 AAC 编码的视频 mime 类型的视频 mp4 添加到 Web 服务器 IIS 7 并且我有一个带有视频标签的页面
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 文件上传控件 OnChange 事件 JQuery

    我正在尝试使用 AJAX JQUERY 和 Net HTTPHandler 构建页面来上传文件 如下所示http dotnet dzone com news async file upload jquery and http dotnet
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 html 架构来实现它
  • 在 ASP.NET Core MVC 中访问从视图到控制器的隐藏值

    我需要帮助使用 jQuery 从 ASP NET Core razor 视图页面传递隐藏控件值 jQuery 用于获取动态控件选定的值 section scripts
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐