How to use on screen keyboard in Aurelia?

Question

How to use on screen keyboard in Aurelia?

234 Views Asked by Sohrab At 05 September 2017 at 07:32

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?

Original Q&A

There are 1 best solutions below

**Ashley Grant** · Answer 1 · 2017-09-05T14:10:19.750000

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?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in AURELIA

Related Questions in ON-SCREEN-KEYBOARD

Trending Questions

Popular # Hahtags

Popular Questions