Question

我想在我的项目中使用On-Screen-Keyboard，这是用Aurelia平台（WebStorm + Aurelia + Typescript）编写的。为此，我们必须使用基于JavaScript / HTML的键盘。以下代码适合我：

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

我不知道如何将此代码集成到项目中。你能帮我吗？

Answer 1

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

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

以下是一个示例：ModelExpression

<强> 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的东西，以使我的生活更简单。

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

1 个答案: