Mottie 虚拟键盘，隐藏原生 Android 输入键盘答案

【问题标题】：Mottie Virtual keyboard, hide native Android Input KeyboardMottie 虚拟键盘，隐藏原生 Android 输入键盘
【发布时间】：2013-04-22 10:10:58
【问题描述】：

我正在尝试使用 jquery 虚拟键盘 - http://mottie.github.io/Keyboard/mobile.html 为移动 Web 应用程序创建一个仅带有几个加速键的数字输入文本。

但是我遇到了一个巨大的问题，即当我按下输入框触发屏幕/虚拟键盘时，会触发原生 android 键盘。如何只触发虚拟键盘，其他插件也可以。我测试了一些都有相同问题的。

也许有一种方法可以禁用输入字段，这样它就不会触发本机键盘但仍会触发屏幕键盘？使输入“只读”有一些问题。

我和其他用户有同样的问题：https://stackoverflow.com/questions/15289281/disable-mobile-default-keyboard-to-show-up-using-my-own-virtual-keyboard-web-a 但是他的问题没有答案。

第一次尝试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Virtual Keyboard Basic Demo</title>

    <!-- demo -->
    <link href="demo/demo.css" rel="stylesheet">

    <!-- jQuery & jQuery UI + theme (required) -->
    <link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>

    <!-- keyboard widget css & script (required) -->
    <link href="css/keyboard.css" rel="stylesheet">
    <script src="js/jquery.keyboard.js"></script>

    <!-- keyboard extensions (optional) -->
    <script src="js/jquery.mousewheel.js"></script>
    <!--
    <script src="js/jquery.keyboard.extension-typing.js"></script>
    <script src="js/jquery.keyboard.extension-autocomplete.js"></script>
    -->

    <!-- initialize keyboard (required) -->
    <script>
        $(function(){
            alert("Keyboard ON");
            //$('#keyboard').keyboard();
            $('#keyboard').on('click tap vclick', function (event) {
                //alert("detected touch");
                event.stopImmediatePropagation();
                event.preventDefault();

                $('#keyboard').keyboard();
            });
        });
    </script>

</head>

<body>

    <!-- Links to other demo pages & docs -->
    <div id="nav">
        <a href="index.html">Main Demo</a>
        <a class="current" href="basic.html">Basic</a>
        <a href="mobile.html">Mobile</a>
        <a href="layouts.html">Layouts</a>
        <a href="navigate.html">Navigate</a>
        <a href="calculator.html">Calculator</a>
        <a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
        <a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
        <a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
        <a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
    </div>
    <!-- End Links -->

    <div id="wrap"> <!-- wrapper only needed to center the input -->

        <!-- keyboard input -->
        <input id="keyboard" type="text">
        <div><p>Static TEST</p></div>

    </div> <!-- End wrapper -->

</body>

【问题讨论】：

你有没有在点击输入框的时候同时尝试event.stopImmediatePropagation()和event.preventDefault()？
不，我没有，让我试试
例如$('input[type=text]').on('click tap vclick', function (event) { event.stopImmediatePropagation(); event.preventDefault(); });
我忘了提到你应该在上述函数中调用虚拟键盘，因为它会停止任何附加到输入框的事件/函数。
不幸的是它不起作用，按下一个键仍然会弹出键盘。我必须看看是什么被触发了，如果可能的话，尽量绕过它。

标签： javascript jquery css jquery-mobile

【解决方案1】：

我添加了以下代码，它似乎确实可以工作，但是需要进行更多测试才能使其成为可靠的解决方法：

$('.keyboard').on('focus click tap vclick', function (event) {
                event.stopImmediatePropagation();
                event.preventDefault();

                $('.keyboard').blur();
            });

【讨论】：

【解决方案2】：

您可以将readonly 添加到<input> 标记中，这将阻止本机键盘出现。虽然记得为桌面用户删除它，这将需要一些设备检测，这永远不会有趣。

【讨论】：

【解决方案3】：

只需使用全局属性<div inputmode="none">，它应该有帮助。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

【讨论】：