How to use on screen keyboard in Aurelia?

Question

I want to use an On-Screen-Keyboard in my project which is written in Aurelia platform (WebStorm+Aurelia+Typescript). For this purpose we have to use a JavaScript/HTML based keyboard. The following code is suitable for me:

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

I don't know how I can integrate this code in the project. Could you please help me?

Answer 1

As far as how to add the jQuery plugin to your project, there are many blog posts on how to do that, and the answer depends on what module loader/bundler you are using.

Regarding the specifics of using a jQuery plugin like this, I would use a custom attribute.

Here's an example: 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>

Note that in this example, I just loaded the jQuery stuff using script tags to make my life simpler.

How to use on screen keyboard in Aurelia?

Question

1 answers

solution1
2 2017-09-05 14:10:19

How to use on screen keyboard in Aurelia?

Question

1 answers

solution1 2 2017-09-05 14:10:19

solution1
2 2017-09-05 14:10:19