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?

Sorry, I don't mean to be rude. --- _"how I can integrate this code in the project"_ is a very open question. An article could be written on how could be done. IMO this is not suitable for StackOverflow. — evolutionxbox, Sep 05 '17 at 08:30
I understand it, but I really don't know anything more to explain about it. May be it would be possible to program a custom attribute for this purpose. — Sohrab, Sep 05 '17 at 08:38
If your question is about how to integrate the jquery code into an Aurelia Custom Element, check the following: http://shrutidh.blogspot.de/ — Marc Scheib, Sep 05 '17 at 09:22

score 2 · Answer 1 · answered Sep 05 '17 at 14:10

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.

Thanks a lot. I did it but edied like this code: $(() => { $("#keyboard").keyboard(kbOptions).addNavigation(navOptions); }); . I got this error: $ is not a function . Do you have any solution?? — Sohrab, Sep 05 '17 at 14:34
I don't know why that wouldn't work. That being said, don't do `$('#keyboard')` in an Aurelia application. You should NEVER do query selectors based on an element ID in an Aurelia application, as this will cause your code to only work for that one specific element, or cause you to have to do coding gymnastics to give elements unique names. Aurelia will give you the element itself that you can pass to jQuery, so use that, like I did in my example. — Ashley Grant, Sep 05 '17 at 14:38

How to use on screen keyboard in Aurelia?

1 Answers1