Javascript Mottie虚拟键盘,隐藏本机Android输入键盘

Javascript Mottie虚拟键盘,隐藏本机Android输入键盘,javascript,jquery,css,jquery-mobile,Javascript,Jquery,Css,Jquery Mobile,我正在尝试使用jquery虚拟键盘——为一个移动web应用程序创建一个只有数字的输入文本,只需几个快捷键 然而,我有一个巨大的问题,当我按下输入框触发屏幕/虚拟键盘时,本机android键盘会被触发。如何触发虚拟键盘,其他插件也可以使用。我测试了几个都有相同问题的测试 也许有一种方法可以禁用输入字段,使其不会触发本机键盘,但仍会触发屏幕键盘?将输入设置为“只读”有一些问题 我和另一个so用户有同样的问题:但是他的问题没有答案 第一次尝试 <!DOCTYPE html> <htm

我正在尝试使用jquery虚拟键盘——为一个移动web应用程序创建一个只有数字的输入文本,只需几个快捷键

然而,我有一个巨大的问题,当我按下输入框触发屏幕/虚拟键盘时,本机android键盘会被触发。如何触发虚拟键盘,其他插件也可以使用。我测试了几个都有相同问题的测试

也许有一种方法可以禁用输入字段,使其不会触发本机键盘,但仍会触发屏幕键盘?将输入设置为“只读”有一些问题

我和另一个so用户有同样的问题:但是他的问题没有答案

第一次尝试

<!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>

虚拟键盘基本演示
$(函数(){
警报(“键盘打开”);
//$('#键盘')。键盘();
$(“#键盘”)。在('单击vclick',函数(事件){
//警报(“检测到触摸”);
事件。stopImmediatePropagation();
event.preventDefault();
$('#键盘')。键盘();
});
});


静态试验


我添加了以下代码,它看起来确实有效,但是需要更多的测试才能使其成为可靠的解决方案:

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

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

您可以将
readonly
添加到
标记中,这将阻止本机键盘出现。尽管记住要为桌面用户删除它,这将需要一些设备检测,这从来都不是有趣的。

只需使用全局属性
,它应该会有帮助。

当您单击inputbox时,您是否同时尝试了
event.stopImmediatePropagation()
event.preventDefault()
?没有,让我试试,例如
$('input[type=text]')。在('click tap vclick',function(event){event.stopImmediatePropagation();event.preventDefault();})
我忘了提到您应该在上述函数中调用虚拟键盘,因为它将停止连接到inputbox的任何事件/函数。不幸的是,它无法工作,当您按下某个键时,键盘仍然会弹出。我必须看看触发了什么,如果可能的话,设法绕过它。