如何在Aurelia的屏幕键盘上使用？

我想在我的项目中使用在屏幕上的键盘写在Aurelia平台（WebStorm + Aurelia + Typescript）。为此我们必须使用基于JavaScript/HTML的键盘。下面的代码是适合我：如何在Aurelia的屏幕键盘上使用？

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <script src="https://code.jquery.com/jquery-git.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
     <link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css"> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script> 
     <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script> 
     <script> 
     /* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */ 
     $(function() { 
     $('#keyboard').keyboard({ 
      layout: 'qwerty' 
     }) 
     // activate the typing extension 
     .addTyping({ 
      showTyping: true, 
      delay: 250 
     }); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="wrap"> 
     <input id="keyboard" type="text" /> 
     </div> 
    </body> 
</html> 
<body> 
    <div id="wrap"> 
    <input class="keyboard" type="text" /> 
    <input class="keyboard" type="text" /> 
    <input class="numpad" type="text" /> 
    </div> 
</body> 
</html>

我不知道我怎么能在这个项目中的代码集成。你可以帮我吗？

来源

2017-09-05 Sohrab

这是开放式的。请缩小范围。 – evolutionxbox

我做到了。谢谢。 – Sohrab

对不起，我的意思不是粗鲁。 --- _“我如何将这些代码整合到项目中”_是一个非常开放的问题。一篇文章可以写成如何完成。 IMO不适用于StackOverflow。 – evolutionxbox

至于如何将jQuery插件添加到您的项目中，有很多关于如何做到这一点的博客文章，答案取决于您使用的是什么模块加载器/打包器。

关于使用像这样的jQuery插件的细节，我会使用自定义属性。

下面是一个例子：https://gist.run?id=87b7807ef8a50301fe358b26f7263056

keyboard.js

import {inject} from 'aurelia-framework'; 

@inject(Element) 
export class KeyboardCustomAttribute { 
    constructor(el) { 
    this.el = el; 
    } 

    attached() { 
    $(this.el).keyboard({ 
     layout: 'qwerty' 
    }) 
    // activate the typing extension 
    .addTyping({ 
     showTyping: true, 
     delay: 250 
    }); 
    } 
}

app.html

<template> 
    <require from="./keyboard"></require> 

    <div> 
    <label>Name: </label> 
    <input type="text" value.bind="name" keyboard /> 
    </div> 
</template>

注意，在这个例子中，我只装了jQuery使用脚本的东西标签使我的生活更简单。

来源

2017-09-05 14:10:19

非常感谢。我做了它，但编辑像这样的代码：$（（）=> {（“＃keyboard”）。keyboard（kbOptions）.addNavigation（navOptions）; }）; 。我得到这个错误：$不是一个函数。你有任何解决方案？ – Sohrab

我不知道为什么这不起作用。话虽如此，不要在Aurelia应用程序中执行'$（'＃keyboard'）'。您绝不应该在Aurelia应用程序中根据元素ID来执行查询选择器，因为这会导致您的代码仅适用于该特定元素，或者导致您必须执行编码体操操作才能为元素提供唯一名称。 Aurelia会给你自己的元素，你可以传递给jQuery，所以使用它，就像我在我的例子中那样。 –

我也是。我得到了同样的错误。 – Sohrab

如何在Aurelia的屏幕键盘上使用？

回答

相关问题