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?
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
app.html
Note that in this example, I just loaded the jQuery stuff using script tags to make my life simpler.