Jquery 虚拟键盘 .keyboard 不是函数答案

【问题标题】：Jquery virtual keyboard .keyboard is not a functionJquery 虚拟键盘 .keyboard 不是函数
【发布时间】：2016-08-10 11:22:32
【问题描述】：

我尝试使用 jquery keyboard.js 从文本框中获取用户输入。如果我省略虚拟键盘代码，它的工作正常。

网址：https://github.com/Mottie/Keyboard

我收到以下控制台错误

Uncaught TypeError: $(...).keyboard is not a function

我按照他们说的做了以下导入，

<!-- jQuery (required) & jQuery UI + theme (optional) -->
<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- still using jQuery v2.2.4 because Bootstrap doesn't support v3+ -->
<script src="docs/js/jquery-latest.min.js"></script>
<script src="docs/js/jquery-ui.min.js"></script>
<!-- <script src="docs/js/jquery-migrate-3.0.0.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>
<script src="js/jquery.keyboard.extension-caret.js"></script>

<!-- demo only -->
<link rel="stylesheet" href="docs/css/bootstrap.min.css">
<link rel="stylesheet" href="docs/css/font-awesome.min.css">
<link href="docs/css/demo.css" rel="stylesheet">
<link href="docs/css/tipsy.css" rel="stylesheet">
<link href="docs/css/prettify.css" rel="stylesheet">
<script src="docs/js/bootstrap.min.js"></script>
<script src="docs/js/demo.js"></script>
<script src="docs/js/jquery.tipsy.min.js"></script>
<script src="docs/js/prettify.js"></script>

虚拟键盘的 JavaScript 代码：

$('#inputPassword').keyboard({
    openOn : null,
    stayOpen : true,
    layout : 'qwerty'
})
.addTyping();

$('#password-opener').click(function(){
    var kb = $('#inputPassword').getkeyboard();
    // close the keyboard if the keyboard is visible and the button is clicked a second time
    if ( kb.isOpen ) {
        kb.close();
    } else {
        kb.reveal();
    }
});

我尝试了几件事，但找不到解决方案。我在这里错过了什么？？

【问题讨论】：

标签： jquery virtual-keyboard

【解决方案1】：

您必须将与 JQuery 相关的代码包含在 DOM 加载就绪事件中：

 $(document).ready(function() {

    $('#inputPassword').keyboard({
        openOn : null,
        stayOpen : true,
        layout : 'qwerty'
    })
    .addTyping();

    $('#password-opener').click(function(){
        var kb = $('#inputPassword').getkeyboard();
        // close the keyboard if the keyboard is visible and the button is clicked a second time
        if ( kb.isOpen ) {
            kb.close();
        } else {
            kb.reveal();
        }
    });

  });

【讨论】：