jQuery - 允许在移动设备上自动显示键盘

Posted 2023-05-06

【中文标题】jQuery - 允许在移动设备上自动显示键盘

【英文标题】：jQuery - Allow Autoshow Keyboard on Mobile

【发布时间】：2017-06-02 03:16:58

【问题描述】：

我有一个具有封闭后端的 Rails 应用程序。在某些页面上，我想自动选择文本输入，这样我就可以使用外部蓝牙扫描仪扫描条码，而无需每次都用鼠标/触摸屏选择它。这在非移动设备上完美运行。但是，在移动设备（主要是平板电脑）上，我希望键盘弹出（因为扫描仪被系统视为“键盘”）。我知道这被 ios 阻止了，因为它可能很烦人。但是，我想知道：

我可以让键盘自动出现在 android 和/或 Windows 平板电脑上吗？

在 iOS 上，我可以更改此默认行为以使键盘自动出现吗？我可以访问所有需要此行为的设备。

编辑：我知道我可以使用click 事件来使键盘出现（现在就是这样）。但是，我不想每次扫描时都触摸平板电脑。

【问题讨论】：

它是一个网络应用程序吗？您需要在页面加载时自动出现，不是吗？

@shukshin.ivan 这是一个使用 Rails 的 Web 应用程序。虽然我需要它来加载页面，但我一般都需要它。如果尚未选择，我有一些 javascript 会每秒自动选择输入字段。现在我需要同样的 JavaScript 来让键盘自动出现。

我认为这在每个操作系统上都是不可能的。键盘显示与用户的操作有关 - jsfiddle.net/Twisty/knoohfwt/2

【参考方案1】：

除了使用出色的 prompt() 之外，还有一些解决方法。

将 Web 应用程序封装到 Phonegap 中并执行 the following way。 请记住，蓝牙扫描仪需要第一次单击才能启用侦听 keyboard 事件，您可以稍微更改 js 代码以手动执行第一次单击（例如，全屏 textarea）然后处理扫描仪。它可以是textarea，在第一次点击后立即隐藏，一切都通过javascript 完成，没有文本区域。 看起来 Windows 智能手机可以帮助您，找不到任何与问题相关的问题。

我已经在诺基亚 Lumia 使用 Windows 8.1、Windows10 和旧的 Windows Mobile 8.1 在 Chrome56 中测试了autofocus fiddle。在前两种情况下，它确实在聚焦后听键盘。后者没有。

奖金。 HTC One M8 模拟器与 Android 4.4 无需点击即可收听键盘。使用 browserstack 服务进行测试。如果有一些不需要点击的android示例怎么办？

奖金2 - autodetect scanner library.

【讨论】：

这样可以，但我有两个扫描区域来回切换。每次我扫描某些东西时都需要一个点击事件，这基本上就是我现在遇到的问题。

如果您有两个扫描区域并且需要按特定顺序（A-B-A-B-A-B...）扫描它们，您可以将代码扫描到一个 textarea 并通过 javascript 将值传递给处理程序。您可以在屏幕上显示订单。大 A - 扫描 A，大 B 扫描 B 等等。

Bonus2 链接非常好。我使用类似的方法作为解决方法（基本上检测原始输入并自己输入）。你也是唯一一个在 Windows/Android 上真正给我答案的人。

【参考方案2】：

基于thoses answers，您必须尝试一些解决方法

你不能，至少在 iOS (iPhone) 中不能，我相信 Android 也是如此。这是一个可用性问题，除了用户输入外，不应允许键盘触发（如果它是自动的，那就很烦人了）。

我知道有几种方法可以解决这个问题：

prompt()打开键盘 如果您从 .click() 事件中触发 .focus()（例如，从 >打开您的对话框），则会显示键盘

你的情况是在你的页面打开时？

至少这个JS fiddle 可以帮助你或this one

【讨论】：

我正在尝试删除屏幕方面的触摸，因为它迫使我每次要扫描时都这样做，而不仅仅是在页面加载时。你了解 Windows 吗？

【参考方案3】：

您可以在诸如focus()、prompt() 等事件处理的内置函数中使用JavaScript 来启动条码扫描功能。在这种情况下，更改一些可用性也将有所帮助。要构建混合应用程序，请尝试阅读 Cordova 键盘插件https://github.com/cjpearson/cordova-plugin-keyboard

快乐编码。

【参考方案4】：

试试下面的代码。它可能会起作用

// div is some selected element
            var f = function(event) 
                $timeout(function()  // angular way, setTimeout is OK
                    input[0].focus();
                    event.preventDefault();
                )
            ;
            var mobile = false;
            div.on('click', function(event) 
                if(mobile) return;
                f(event);
            );

            div.on('touchstart', function(event) 
                mobile = true;
                f(event);
            );

            div.on('touchend', function(event) 
                event.preventDefault();
                event.stopPropagation();
            );

【参考方案5】：

我最好的选择是使用offsite input 并专注于那里。它会帮助你控制 -

键盘出现的时间(setTimeOut) 检查并重新打开键盘

你需要做这样的事情-

<input type="text" style="visibility: hidden; position: fixed; left: -200px" >

使用 jQuery-

$("#theOffViewBox").focus();

这在 iOS/Android/Windows/Linux 上同样适用于作为基础 JavaScript jugad。

【讨论】：

输入不会在没有键盘出现的情况下改变。它只是不听键盘事件。即使它是专注的。

I know that I can use a click event to make the keyboard appear (that is how it appears now) ...这意味着.focus()应该可以工作...

您可以根据用户与设备的交互情况反复聚焦。

本意是不与设备交互。