禁用 Ionic 上的本机键盘答案

【问题标题】：Disable the native keyboard on Ionic禁用 Ionic 上的本机键盘
【发布时间】：2022-01-23 05:47:22
【问题描述】：

显然，this 等解决方案在 Android 5.1 上无法正常工作。*（KB 闪烁（快速打开和关闭）。

.directive('disableKeyboard', function ($timeout, $window) {
    var linker = function (scope, element, attrs) {

        if (!$window.cordova || !$window.cordova.plugins.Keyboard) {
            return;
        }

        element.bind('focus click',
            function (e) {
                e.preventDefault();
                $timeout($window.cordova.plugins.Keyboard.close, 0);
            }
        );
    };

    return {
        restrict: 'A',
        link: linker,
    }
})

Ionic forum 没有给出有意义的解决方案。有什么建议么？请注意：我想避免cordova.plugins.Keyboard.close。谢谢。

【问题讨论】：

您想要的确切行为是什么？比如输入字段是什么？您想如何将数据添加到该字段等？可能在共享模板方面会帮助我们为您提供解决方法。
@mudasserajaz 预期的行为 - 在某些页面上禁用本机键盘（即在 focus / click 事件上保持关闭）。
尝试将disabled 属性添加到这些输入元素。
@mudasserajaz 太好了，这行得通！请发表评论作为答案。
我已经添加了我的答案:)

标签： javascript ionic

【解决方案1】：

在输入标签中添加disabled属性，例如

<input type="text" name="lname" disabled>

注意：这可能会改变输入标签的背景颜色，但您可以使用 css 进行更改。

【讨论】：

这就是解决方案。

【解决方案2】：

我知道我迟到了，但我开发了这个库来做到这一点：https://www.npmjs.com/package/ionic-no-keyboard。它没有闪烁，它就是这样做的。它禁用了本机键盘。只需在输入中添加no-keyboard 标签，本机键盘将被禁用。

【讨论】：

【解决方案3】：

2022 年 1 月 22 日更新：

在这里阅读Virtual Keyboard API 文档时：https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardPolicy/explainer.md 我注意到它引用了inputmode 属性，该属性可用于更改应显示的虚拟键盘布局类型（数字、电话、数字等） .

在这个文档中，他们提到none的值可以用来隐藏虚拟键盘，在MDN文档中查找该属性后，果然none值是用来页面（在本例中为移动应用程序）实现了自己的键盘：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode#values

与其他解决方案不同，此属性将焦点保留在 input 元素上，并且仍允许用户执行多选和上下文菜单操作（即复制/粘贴、全选等）。

此属性可用于输入：

<input inputmode="none">

以及通过contenteditable 属性可编辑的任何元素：

<div inputmode="none" contenteditable />

我在 iOS (XCode) 和 Android (Android Studio) 模拟器/模拟器上都测试了这个功能，并且在这两个模拟器上都可以使用！

原答案 2022 年 1 月 15 日：

谢天谢地，看起来一个名为Virtual Keyboard API 的新 Web API 正在开发中。

我不会详细说明新 API 本身，因为我已经在 another Stack Overflow answer 中进行了详细说明。

新的 API introduced a new attribute 称为 virtualKeyboardPolicy，可以设置为 auto 或 manual。

当设置为manual 时，虚拟键盘将不会在input 元素获得焦点时自动显示，但与其他解决方案不同的是，input 将 > 保持专注并允许用户执行多字符选择、复制/粘贴等。

这个功能是shipped in Chromium v94（2021 年 9 月 21 日发布），所以我在几个基于 Chromium 的浏览器中做了一些测试，新属性似乎已经起作用了！

<input
  virtualkeyboardpolicy="auto"
  value="Auto Virtual Keyboard"
>

请注意，虚拟键盘隐藏在以下图像中！

<input
  virtualkeyboardpolicy="manual"
  value="Manual Virtual Keyboard"
>

我希望虚拟键盘 API 最终将在 Ionic 用于在本机设备上运行的 Web 视图中实现，这将使我们能够在我们的移动应用程序中使用它！

【讨论】：