如何在Aurelia中使用屏幕鍵盤？

Question

我想在以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插件的細節，我將使用自定義屬性。

這是一個示例： 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內容，以簡化我的生活。

如何在Aurelia中使用屏幕鍵盤？

問題描述

1 個解決方案

解決方案1
2 2017-09-05 14:10:19

如何在Aurelia中使用屏幕鍵盤？

問題描述

1 個解決方案

解決方案1 2 2017-09-05 14:10:19

解決方案1
2 2017-09-05 14:10:19