npm update

[Angular] Fix return type of getButtonElement()

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+## Description
+
+A few sentences describing the overall goals of the pull request's commits.
+
+## Checks
+
+- [ ] Tests ( `npm run test -- --coverage` ) Coverage at `./coverage/lcov-report/index.html` should be 100%
+- [ ] Documentation ( `npm run docs` ) Coverage at `./docs/source.html` should be 100%

.travis.yml

@@ -6,6 +6,7 @@ install:
   - npm install
 script:
 - npm run test -- --coverage
+- npm run demo
 - codecov
 after_success:
   - wget https://raw.githubusercontent.com/DiscordHooks/travis-ci-discord-webhook/master/send.sh

README.md

@@ -1,12 +1,13 @@
 <div align="center">
   <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" align="center" width="100%"></a>
-  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-10172018.gif" align="center" width="100%"></a>
+  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/skdemo-4x2.gif" align="center" width="100%"></a>
   <blockquote>The easily customisable and responsive on-screen virtual keyboard for Javascript projects.</blockquote>
-  <p><a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
   <a href="https://www.npmjs.com/package/simple-keyboard" target="_blank"><img src="https://img.shields.io/npm/v/simple-keyboard.svg?style=flat" alt="npm version"></a>
   <a href="https://travis-ci.org/hodgef/simple-keyboard" target="_blank"><img src="https://travis-ci.org/hodgef/simple-keyboard.svg?branch=master" alt="Build Status"></a>
   <a href="https://codecov.io/gh/hodgef/simple-keyboard" target="_blank"><img src="https://img.shields.io/codecov/c/github/hodgef/simple-keyboard/master.svg?style=flat" alt="Coverage Status"></a>
   <a href="https://doc.esdoc.org/github.com/hodgef/simple-keyboard" target="_blank"><img src="https://doc.esdoc.org/github.com/hodgef/simple-keyboard/badge.svg" alt="Documentation Status"></a>
+  <img src="https://img.shields.io/david/dev/hodgef/simple-keyboard.svg" alt="Dev dependencies">
+  <a href="https://www.codacy.com/app/hodgef/simple-keyboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=hodgef/simple-keyboard&amp;utm_campaign=Badge_Grade" target="_blank"><img src="https://api.codacy.com/project/badge/Grade/5778fccc6a894701853d9a1f2fb44a76" alt="Codacy Badge"></a>
   </p>
 </div>
 
@@ -34,7 +35,9 @@ Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cas
 
 ### Other versions
 
-* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
+* [React.js](https://github.com/hodgef/react-simple-keyboard)
+* [Angular](https://simple-keyboard.com/demo)
+* [Vue.js](https://simple-keyboard.com/demo)
 
 ### Questions?
 

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.8.0
+ *   simple-keyboard v2.13.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,5 +8,5 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
+ */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 /*# sourceMappingURL=index.css.map */

build/index.d.ts

@@ -0,0 +1,189 @@
+declare module 'simple-keyboard' {
+  interface KeyboardLayoutObject {
+    default: string[];
+    shift?: string[];
+  }
+
+  interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+  }
+
+  interface KeyboardOptions {
+    /**
+     * Modify the keyboard layout.
+     */
+    layout?: KeyboardLayoutObject;
+
+    /**
+     * Specifies which layout should be used.
+     */
+    layoutName?: string;
+
+    /**
+     * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`).
+     */
+    display?: { [button: string]: string };
+
+    /**
+     * By default, when you set the display property, you replace the default one. This setting merges them instead.
+     */
+    mergeDisplay?: boolean;
+
+    /**
+     * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
+     */
+    theme?: string;
+
+    /**
+     * A prop to add your own css classes to one or several buttons.
+     */
+    buttonTheme?: KeyboardButtonTheme[];
+
+    /**
+     * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
+     */
+    debug?: boolean;
+
+    /**
+     * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
+     */
+    newLineOnEnter?: boolean;
+
+    /**
+     * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
+     */
+    tabCharOnTab?: boolean;
+
+    /**
+     * Allows you to use a single simple-keyboard instance for several inputs.
+     */
+    inputName?: string;
+
+    /**
+     * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     *
+     * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     */
+    maxLength?:
+      | number
+      | {
+          [inputName: string]: number;
+        };
+
+    /**
+     * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+     */
+    syncInstanceInputs?: boolean;
+
+    /**
+     * Enable highlighting of keys pressed on physical keyboard.
+     */
+    physicalKeyboardHighlight?: boolean;
+
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+
+    /**
+     * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+     */
+    onKeyPress?: (button: string) => any;
+
+    /**
+     * Executes the callback function on input change. Returns the current input's string.
+     */
+    onChange?: (input: string) => any;
+
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender?: () => void;
+
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit?: () => void;
+
+    /**
+     * Executes the callback function on input change. Returns the input object with all defined inputs.
+     */
+    onChangeAll?: (inputs: any) => any;
+  }
+
+  class Keyboard {
+    constructor(selector: string, options: KeyboardOptions);
+    constructor(options: KeyboardOptions);
+    options: KeyboardOptions;
+
+    /**
+     * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    addButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    removeButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Clear the keyboard's input.
+     *
+     * @param {string} [inputName] optional - the internal input to select
+     */
+    clearInput(inputName?: string): void;
+
+    /**
+     * Get the keyboard’s input (You can also get it from the onChange prop).
+     * @param  {string} [inputName] optional - the internal input to select
+     */
+    getInput(inputName?: string): string;
+
+    /**
+     * Set the keyboard’s input.
+     * @param  {string} input the input value
+     * @param  {string} inputName optional - the internal input to select
+     */
+    setInput(input: string, inputName?: string): void;
+
+    /**
+     * Set new option or modify existing ones after initialization.
+     * @param  {KeyboardOptions} option The option to set
+     */
+    setOptions(options: KeyboardOptions): void;
+
+    /**
+     * Send a command to all simple-keyboard instances at once (if you have multiple instances).
+     * @param  {function(instance: object, key: string)} callback Function to run on every instance
+     */
+    dispatch(callback: (instance: any, key: string) => void): void;
+
+    /**
+     * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
+     * @param  {string} button The button layout name to select
+     */
+    getButtonElement(button: string): HTMLElement | HTMLElement[];
+  }
+
+  export default Keyboard;
+}

config/paths.js

@@ -79,6 +79,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appSrcLib: resolveApp('src/lib'),
+  appSrcLibTypes: resolveApp('src/lib/@types'),
   appSrcDemo: resolveApp('src/demo'),
   appTsConfig: resolveApp('tsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),

config/webpack.config.demo.js

@@ -326,10 +326,13 @@ module.exports = {
               configFile: false,
               compact: false,
               presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
+                "@babel/preset-env",
+                "@babel/preset-react"
+              ],
+              plugins: [
+                  [
+                    "@babel/plugin-proposal-class-properties"
+                  ]
               ],
               cacheDirectory: true,
               // Save disk space when time isn't as important

config/webpack.config.prod.js

@@ -21,6 +21,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const getPackageJson = require('./getPackageJson');
 
 
@@ -510,6 +511,12 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new CopyWebpackPlugin([
+      {
+        from: `${paths.appSrcLibTypes}`,
+        to: paths.appLayoutsBuild
+      }
+    ]),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     /*new WorkboxWebpackPlugin.GenerateSW({

docs/class/src/lib/components/Keyboard.js~SimpleKeyboard.html

@@ -175,8 +175,7 @@ This class:</p>
       <div>
         
         
-        <div data-ice="description"><p>Tracks current cursor position
-As keys are pressed, text will be added/removed at that position within the input.</p>
+        <div data-ice="description"><p>Only first instance should insall the caret handling events</p>
 </div>
       </div>
     </td>
@@ -1345,7 +1344,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber121">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber123">source</a></span></span>
     </span>
   </h3>
 
@@ -1388,15 +1387,14 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber535">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber512">source</a></span></span>
     </span>
   </h3>
 
   
   
   
-  <div data-ice="description"><p>Tracks current cursor position
-As keys are pressed, text will be added/removed at that position within the input.</p>
+  <div data-ice="description"><p>Only first instance should insall the caret handling events</p>
 </div>
 
   
@@ -1433,7 +1431,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber613">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber634">source</a></span></span>
     </span>
   </h3>
 
@@ -1477,7 +1475,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber623">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber644">source</a></span></span>
     </span>
   </h3>
 
@@ -1521,7 +1519,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber272">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber274">source</a></span></span>
     </span>
   </h3>
 
@@ -1564,7 +1562,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber233">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber235">source</a></span></span>
     </span>
   </h3>
 
@@ -1607,7 +1605,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber768">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber798">source</a></span></span>
     </span>
   </h3>
 
@@ -1651,7 +1649,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber110">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber112">source</a></span></span>
     </span>
   </h3>
 
@@ -1731,7 +1729,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber222">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber224">source</a></span></span>
     </span>
   </h3>
 
@@ -1818,7 +1816,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber116">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber118">source</a></span></span>
     </span>
   </h3>
 
@@ -1861,7 +1859,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber69">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber71">source</a></span></span>
     </span>
   </h3>
 
@@ -1904,7 +1902,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber150">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber152">source</a></span></span>
     </span>
   </h3>
 
@@ -1948,7 +1946,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber61">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber62">source</a></span></span>
     </span>
   </h3>
 
@@ -2065,6 +2063,13 @@ keyboard.clearInput();</code></pre>
       <td data-ice="description"><p>Enable highlighting of keys pressed on physical keyboard.</p>
 </td>
     </tr>
+<tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">preventMouseDownDefault</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>Calling preventDefault for the mousedown events keeps the focus on the input.</p>
+</td>
+    </tr>
 <tr data-ice="property" data-depth="0">
       <td data-ice="name" class="code" data-depth="0">physicalKeyboardHighlightTextColor</td>
       <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></td>
@@ -2148,7 +2153,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber145">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber147">source</a></span></span>
     </span>
   </h3>
 
@@ -2192,7 +2197,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber579">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber600">source</a></span></span>
     </span>
   </h3>
 
@@ -2236,7 +2241,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber350">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber352">source</a></span></span>
     </span>
   </h3>
 
@@ -2327,7 +2332,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber386">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber388">source</a></span></span>
     </span>
   </h3>
 
@@ -2407,7 +2412,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber519">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber535">source</a></span></span>
     </span>
   </h3>
 
@@ -2467,7 +2472,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber360">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber362">source</a></span></span>
     </span>
   </h3>
 
@@ -2512,7 +2517,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber295">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber297">source</a></span></span>
     </span>
   </h3>
 
@@ -2573,7 +2578,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber370">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber372">source</a></span></span>
     </span>
   </h3>
 
@@ -2646,7 +2651,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber488">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber490">source</a></span></span>
     </span>
   </h3>
 
@@ -2719,7 +2724,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber310">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber312">source</a></span></span>
     </span>
   </h3>
 
@@ -2792,7 +2797,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber158">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber160">source</a></span></span>
     </span>
   </h3>
 
@@ -2865,7 +2870,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber265">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber267">source</a></span></span>
     </span>
   </h3>
 
@@ -2925,7 +2930,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber218">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber220">source</a></span></span>
     </span>
   </h3>
 
@@ -2991,7 +2996,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber255">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber257">source</a></span></span>
     </span>
   </h3>
 
@@ -3035,7 +3040,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber506">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber508">source</a></span></span>
     </span>
   </h3>
 
@@ -3079,7 +3084,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber589">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber610">source</a></span></span>
     </span>
   </h3>
 
@@ -3123,7 +3128,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber546">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber567">source</a></span></span>
     </span>
   </h3>
 
@@ -3167,7 +3172,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber571">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber592">source</a></span></span>
     </span>
   </h3>
 
@@ -3211,7 +3216,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber563">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber584">source</a></span></span>
     </span>
   </h3>
 
@@ -3255,7 +3260,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber436">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber438">source</a></span></span>
     </span>
   </h3>
 
@@ -3335,7 +3340,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber630">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber651">source</a></span></span>
     </span>
   </h3>
 
@@ -3379,7 +3384,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber342">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber344">source</a></span></span>
     </span>
   </h3>
 
@@ -3440,7 +3445,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber327">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber329">source</a></span></span>
     </span>
   </h3>
 
@@ -3508,7 +3513,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber285">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber287">source</a></span></span>
     </span>
   </h3>
 

docs/class/src/lib/services/Utilities.js~Utilities.html

@@ -501,6 +501,35 @@
     <td>
       
       
+    </td>
+  </tr>
+<tr data-ice="target">
+    <td>
+      <span class="access" data-ice="access">public</span>
+      
+      
+      
+      <span class="override" data-ice="override"></span>
+    </td>
+    <td>
+      <div>
+        <p>
+          
+          
+          
+          <span class="code" data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPosAction">updateCaretPosAction</a></span></span><span class="code" data-ice="signature">(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, length: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span>, minus: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span>)</span>
+        </p>
+      </div>
+      <div>
+        
+        
+        <div data-ice="description"><p>Action method of updateCaretPos</p>
+</div>
+      </div>
+    </td>
+    <td>
+      
+      
     </td>
   </tr>
 </tbody>
@@ -572,7 +601,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber308">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber322">source</a></span></span>
     </span>
   </h3>
 
@@ -661,7 +690,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber202">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber224">source</a></span></span>
     </span>
   </h3>
 
@@ -755,7 +784,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber345">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber359">source</a></span></span>
     </span>
   </h3>
 
@@ -828,7 +857,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber355">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber369">source</a></span></span>
     </span>
   </h3>
 
@@ -908,7 +937,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber32">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber33">source</a></span></span>
     </span>
   </h3>
 
@@ -982,7 +1011,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber116">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber117">source</a></span></span>
     </span>
   </h3>
 
@@ -1069,7 +1098,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber46">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber47">source</a></span></span>
     </span>
   </h3>
 
@@ -1125,7 +1154,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber136">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber137">source</a></span></span>
     </span>
   </h3>
 
@@ -1226,7 +1255,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber284">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber298">source</a></span></span>
     </span>
   </h3>
 
@@ -1310,7 +1339,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber336">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber350">source</a></span></span>
     </span>
   </h3>
 
@@ -1366,7 +1395,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber233">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber251">source</a></span></span>
     </span>
   </h3>
 
@@ -1453,7 +1482,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber185">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber186">source</a></span></span>
     </span>
   </h3>
 
@@ -1508,6 +1537,81 @@
 
   
   
+</div>
+<div class="detail" data-ice="detail">
+  <h3 data-ice="anchor" id="instance-method-updateCaretPosAction">
+    <span class="access" data-ice="access">public</span>
+    
+    
+    
+    
+    
+    <span class="code" data-ice="name">updateCaretPosAction</span><span class="code" data-ice="signature">(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, length: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span>, minus: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span>)</span>
+    <span class="right-info">
+      
+      
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber203">source</a></span></span>
+    </span>
+  </h3>
+
+  
+  
+  
+  <div data-ice="description"><p>Action method of updateCaretPos</p>
+</div>
+
+  
+
+  <div data-ice="properties"><div data-ice="properties">
+  <h4 data-ice="title">Params:</h4>
+  <table class="params">
+    <thead>
+    <tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
+    </thead>
+    <tbody>
+    
+    <tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">instance</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>The instance whose position should be updated</p>
+</td>
+    </tr>
+<tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">length</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>Represents by how many characters the input should be moved</p>
+</td>
+    </tr>
+<tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">minus</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>Whether the cursor should be moved to the left or not.</p>
+</td>
+    </tr>
+</tbody>
+  </table>
+</div>
+</div>
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
 </div>
 </div>
 </div>

docs/coverage.json

@@ -1,7 +1,7 @@
 {
   "coverage": "100%",
-  "expectCount": 77,
-  "actualCount": 77,
+  "expectCount": 78,
+  "actualCount": 78,
   "files": {
     "src/demo/App.js": {
       "expectCount": 8,
@@ -24,8 +24,8 @@
       "undocumentLines": []
     },
     "src/lib/services/Utilities.js": {
-      "expectCount": 15,
-      "actualCount": 15,
+      "expectCount": 16,
+      "actualCount": 16,
       "undocumentLines": []
     },
     "src/lib/tests/TestUtility.js": {

docs/file/src/demo/App.js.html

@@ -85,7 +85,7 @@ class App {
     </div>
     `);
   
-    document.querySelector('.input').addEventListener('change', (event) => {
+    document.querySelector('.input').addEventListener('input', (event) => {
       this.keyboard.setInput(event.target.value);
     });
   }

docs/file/src/lib/components/Keyboard.js.html

@@ -92,8 +92,9 @@ class SimpleKeyboard {
      * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
+     * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
-     * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have. 
+     * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
      * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
      * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
@@ -104,6 +105,7 @@ class SimpleKeyboard {
     this.options.layoutName = this.options.layoutName || "default";
     this.options.theme = this.options.theme || "hg-theme-default";
     this.options.inputName = this.options.inputName || "default";
+    this.options.preventMouseDownDefault = this.options.preventMouseDownDefault === false ? false : true;
 
     /**
      * @type {object} Classes identifying loaded plugins
@@ -336,7 +338,7 @@ class SimpleKeyboard {
    */
   clearInput(inputName){
     inputName = inputName || this.options.inputName;
-    this.input[this.options.inputName] = '';
+    this.input[inputName] = '';
 
     /**
      * Enforce syncInstanceInputs, if set
@@ -546,40 +548,59 @@ class SimpleKeyboard {
    * Retrieves the current cursor position within a input or textarea (if any)
    */
   handleCaret(){
+    /**
+     * Only first instance should insall the caret handling events
+     */
+    this.caretPosition = null;
+    let simpleKeyboardInstances = window['SimpleKeyboardInstances'];
+
+    if(
+      (
+        simpleKeyboardInstances &&
+        Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass)
+      ) ||
+      !simpleKeyboardInstances
+    ){
     if(this.options.debug){
-      console.log("Caret handling started");
+        console.log(`Caret handling started (${this.keyboardDOMClass})`)
     }
 
     document.addEventListener("keyup", this.caretEventHandler);
     document.addEventListener("mouseup", this.caretEventHandler);
     document.addEventListener("touchend", this.caretEventHandler);
   }
+  }
 
   /**
    * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event){
     let targetTagName;
-
     if(event.target.tagName){
       targetTagName = event.target.tagName.toLowerCase();
     }
 
+    this.dispatch(instance => {
+      if(instance.isMouseHold){
+        instance.isMouseHold = false;
+    }
+
     if(
       (targetTagName === "textarea" ||
       targetTagName === "input") &&
-      !this.options.disableCaretPositioning
+        !instance.options.disableCaretPositioning
     ){
       /**
        * Tracks current cursor position
        * As keys are pressed, text will be added/removed at that position within the input.
        */
-      this.caretPosition = event.target.selectionStart;
+        instance.caretPosition = event.target.selectionStart;
 
-      if(this.options.debug){
-        console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
+        if(instance.options.debug){
+          console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
       }     
     }
+    });
   }
 
   /**
@@ -587,7 +608,7 @@ class SimpleKeyboard {
    */
   onInit(){
     if(this.options.debug){
-      console.log("Initialized");
+      console.log(`${this.keyboardDOMClass} Initialized`)
     }
 
     /**
@@ -677,6 +698,7 @@ class SimpleKeyboard {
 
     let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
     let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
+    let useTouchEvents = this.options.useTouchEvents || false
 
     /**
      * Account for buttonTheme, if set
@@ -742,12 +764,25 @@ class SimpleKeyboard {
          */
         var buttonDOM = document.createElement('div');
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => {
-          this.isMouseHold = false;
-          this.handleButtonClicked(button);
+        
+        if (useTouchEvents) {
+          buttonDOM.ontouchstart = (e) => {
+            this.handleButtonClicked(button);
+            this.handleButtonMouseDown(button, e);
+          }
+          buttonDOM.ontouchend = e => this.handleButtonMouseUp();
+          buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
+        } else {
+          buttonDOM.onclick = () => {
+            this.isMouseHold = false;
+            this.handleButtonClicked(button);
+          }
+          buttonDOM.onmousedown = (e) => {
+            if (this.options.preventMouseDownDefault) e.preventDefault();
+            this.handleButtonMouseDown(button, e);
+          }
         }
-        buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
-
+        
         /**
          * Adding identifier
          */
@@ -798,17 +833,19 @@ class SimpleKeyboard {
      */
     this.onRender();
 
-    /**
-     * Handling mouseup
-     */
-    document.onmouseup = () => this.handleButtonMouseUp();
-
     if(!this.initialized){
       /**
        * Ensures that onInit is only called once per instantiation
        */
       this.initialized = true;
 
+      /**
+       * Handling mouseup
+       */
+      if (!useTouchEvents) {
+        document.onmouseup = () => this.handleButtonMouseUp();
+      }
+
       /**
        * Calling onInit
        */

docs/file/src/lib/services/Utilities.js.html

@@ -60,6 +60,7 @@ class Utilities {
     this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
     this.getUpdatedInput = this.getUpdatedInput.bind(this);
     this.updateCaretPos = this.updateCaretPos.bind(this);
+    this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
     this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
     this.camelCase = this.camelCase.bind(this);
     this.countInArray = this.countInArray.bind(this);
@@ -225,11 +226,32 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus){
-    if(minus){
-      if(this.simpleKeyboardInstance.caretPosition > 0)
-        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length;
+    if(this.simpleKeyboardInstance.options.syncInstanceInputs){
+      this.simpleKeyboardInstance.dispatch(instance => {
+        this.updateCaretPosAction(instance, length, minus);
+      });
     } else {
-      this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
+      this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
+    }
+  }
+
+  /**
+   * Action method of updateCaretPos
+   * 
+   * @param  {object} instance The instance whose position should be updated
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPosAction(instance, length, minus){
+    if(minus){
+      if(instance.caretPosition > 0)
+      instance.caretPosition = instance.caretPosition - length;
+    } else {
+      instance.caretPosition = instance.caretPosition + length;
+    }
+
+    if(this.simpleKeyboardInstance.options.debug){
+      console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`);
     }
   }
 
@@ -258,10 +280,6 @@ class Utilities {
 
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", position);
-    }
-
     return output;
   }
 
@@ -310,10 +328,6 @@ class Utilities {
       }
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
-    }
-
     return output;
   }
   /**
@@ -397,7 +411,6 @@ class Utilities {
   countInArray(array, value){
     return array.reduce((n, x) => n + (x === value), 0);
   }
-
 }
 
 export default Utilities;</code></pre>

docs/script/search_index.js

@@ -755,6 +755,12 @@ window.esdocSearchIndex = [
     "src/lib/services/Utilities.js~Utilities#updateCaretPos",
     "method"
   ],
+  [
+    "src/lib/services/utilities.js~utilities#updatecaretposaction",
+    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPosAction",
+    "src/lib/services/Utilities.js~Utilities#updateCaretPosAction",
+    "method"
+  ],
   [
     "src/lib/tests/testutility.js",
     "file/src/lib/tests/TestUtility.js.html",

docs/source.html

@@ -39,7 +39,7 @@
 </div>
 </nav>
 
-<div class="content" data-ice="content"><h1>Source <img data-ice="coverageBadge" src="./badge.svg"><span data-ice="totalCoverageCount" class="total-coverage-count">77/77</span></h1>
+<div class="content" data-ice="content"><h1>Source <img data-ice="coverageBadge" src="./badge.svg"><span data-ice="totalCoverageCount" class="total-coverage-count">78/78</span></h1>
 
 <table class="files-summary" data-ice="files" data-use-coverage="true">
   <thead>
@@ -58,9 +58,9 @@
       <td data-ice="filePath"><span><a href="file/src/demo/App.js.html">src/demo/App.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/demo/App.js~App.html">App</a></span></td>
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">8/8</span></td>
-      <td style="display: none;" data-ice="size">1919 byte</td>
+      <td style="display: none;" data-ice="size">1918 byte</td>
       <td style="display: none;" data-ice="lines">84</td>
-      <td style="display: none;" data-ice="updated">2018-11-02 22:34:11 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:59:07 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/demo/index.js.html">src/demo/index.js</a></span></td>
@@ -68,15 +68,15 @@
       <td class="coverage"><span data-ice="coverage">-</span></td>
       <td style="display: none;" data-ice="size">70 byte</td>
       <td style="display: none;" data-ice="lines">5</td>
-      <td style="display: none;" data-ice="updated">2018-09-02 03:31:31 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/components/Keyboard.js.html">src/lib/components/Keyboard.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></td>
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">41/41</span></td>
-      <td style="display: none;" data-ice="size">24942 byte</td>
-      <td style="display: none;" data-ice="lines">778</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 15:50:43 (UTC)</td>
+      <td style="display: none;" data-ice="size">26391 byte</td>
+      <td style="display: none;" data-ice="lines">815</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:52:55 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/index.js.html">src/lib/index.js</a></span></td>
@@ -84,7 +84,7 @@
       <td class="coverage"><span data-ice="coverage">-</span></td>
       <td style="display: none;" data-ice="size">85 byte</td>
       <td style="display: none;" data-ice="lines">2</td>
-      <td style="display: none;" data-ice="updated">2018-06-06 23:02:53 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/KeyboardLayout.js.html">src/lib/services/KeyboardLayout.js</a></span></td>
@@ -92,7 +92,7 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">2/2</span></td>
       <td style="display: none;" data-ice="size">746 byte</td>
       <td style="display: none;" data-ice="lines">28</td>
-      <td style="display: none;" data-ice="updated">2018-10-03 02:14:58 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html">src/lib/services/PhysicalKeyboard.js</a></span></td>
@@ -100,15 +100,15 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">5/5</span></td>
       <td style="display: none;" data-ice="size">2908 byte</td>
       <td style="display: none;" data-ice="lines">96</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 15:54:53 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/Utilities.js.html">src/lib/services/Utilities.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">15/15</span></td>
-      <td style="display: none;" data-ice="size">11188 byte</td>
-      <td style="display: none;" data-ice="lines">360</td>
-      <td style="display: none;" data-ice="updated">2018-11-02 22:28:58 (UTC)</td>
+      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">16/16</span></td>
+      <td style="display: none;" data-ice="size">11708 byte</td>
+      <td style="display: none;" data-ice="lines">373</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:55:18 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/tests/TestUtility.js.html">src/lib/tests/TestUtility.js</a></span></td>
@@ -116,7 +116,7 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">6/6</span></td>
       <td style="display: none;" data-ice="size">2830 byte</td>
       <td style="display: none;" data-ice="lines">106</td>
-      <td style="display: none;" data-ice="updated">2018-10-04 22:12:09 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:47 (UTC)</td>
     </tr>
 </tbody>
 </table>

package.json

@@ -1,8 +1,9 @@
 {
   "name": "simple-keyboard",
-  "version": "2.8.0",
+  "version": "2.13.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
+  "types": "build/index.d.ts",
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -38,65 +39,68 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.1.0",
-    "@svgr/webpack": "2.4.1",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "@svgr/webpack": "4.1.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "9.0.0",
+    "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-named-asset-import": "^0.2.3",
-    "babel-preset-react-app": "^6.1.0",
+    "babel-plugin-named-asset-import": "^0.3.0",
+    "babel-preset-react-app": "^7.0.0",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
-    "css-loader": "1.0.0",
-    "dotenv": "6.0.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "2.0.2",
+    "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
-    "eslint": "5.6.0",
+    "esdoc": "^1.1.0",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "5.11.0",
     "eslint-config-react-app": "^3.0.5",
     "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-flowtype": "3.2.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
-    "file-loader": "2.0.0",
+    "file-loader": "3.0.1",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
-    "fs-extra": "7.0.0",
-    "html-webpack-plugin": "4.0.0-alpha.2",
+    "fs-extra": "7.0.1",
+    "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.1",
+    "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "0.5.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.1.0",
+    "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.0.6",
+    "postcss-preset-env": "6.5.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.6.1",
-    "react-app-polyfill": "^0.1.3",
-    "react-dev-utils": "^6.1.1",
-    "react-dom": "^16.6.1",
-    "resolve": "1.8.1",
+    "react": "^16.7.0",
+    "react-app-polyfill": "^0.2.0",
+    "react-dev-utils": "^7.0.0",
+    "react-dom": "^16.7.0",
+    "resolve": "1.9.0",
     "sass-loader": "7.1.0",
-    "style-loader": "0.23.0",
-    "terser-webpack-plugin": "1.1.0",
-    "url-loader": "1.1.1",
-    "webpack": "4.19.1",
-    "webpack-dev-server": "3.1.9",
+    "style-loader": "0.23.1",
+    "terser-webpack-plugin": "1.2.0",
+    "url-loader": "1.1.2",
+    "webpack": "4.28.2",
+    "webpack-dev-server": "3.1.13",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3",
-    "esdoc": "^1.1.0",
-    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
-    "esdoc-standard-plugin": "^1.0.0"
+    "workbox-webpack-plugin": "3.6.3"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "browserslist": [
     ">0.2%",
-    "not dead",
     "not ie <= 11",
     "not op_mini all"
   ],
@@ -144,7 +148,13 @@
   },
   "babel": {
     "presets": [
-      "react-app"
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-class-properties"
+      ]
     ]
   }
 }

src/demo/App.js

@@ -31,7 +31,7 @@ class App {
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       newLineOnEnter: true,
-      physicalKeyboardHighlight: true,
+      physicalKeyboardHighlight: true
     });
   
     /**
@@ -43,7 +43,7 @@ class App {
     </div>
     `);
   
-    document.querySelector('.input').addEventListener('change', (event) => {
+    document.querySelector('.input').addEventListener('input', (event) => {
       this.keyboard.setInput(event.target.value);
     });
   }

src/demo/css/App.css

@@ -8,7 +8,7 @@
 #root .simple-keyboard-preview {
   background: rgba(0,0,0,0.8);
   border: 20px solid rgba(0,0,0,0.1);
-  height: 260px;
+  height: 200px;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
   padding: 10px;

src/demo/tests/App.test.js

@@ -48,7 +48,7 @@ it('Demo input change will work', () => {
   demo.onDOMLoaded();
 
   document.body.querySelector('.input').value = "test";
-  document.body.querySelector('.input').dispatchEvent(new Event('change'));
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
   
   expect(demo.keyboard.getInput()).toBe("test");
 });

src/lib/@types/index.d.ts

@@ -0,0 +1,189 @@
+declare module 'simple-keyboard' {
+  interface KeyboardLayoutObject {
+    default: string[];
+    shift?: string[];
+  }
+
+  interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+  }
+
+  interface KeyboardOptions {
+    /**
+     * Modify the keyboard layout.
+     */
+    layout?: KeyboardLayoutObject;
+
+    /**
+     * Specifies which layout should be used.
+     */
+    layoutName?: string;
+
+    /**
+     * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`).
+     */
+    display?: { [button: string]: string };
+
+    /**
+     * By default, when you set the display property, you replace the default one. This setting merges them instead.
+     */
+    mergeDisplay?: boolean;
+
+    /**
+     * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
+     */
+    theme?: string;
+
+    /**
+     * A prop to add your own css classes to one or several buttons.
+     */
+    buttonTheme?: KeyboardButtonTheme[];
+
+    /**
+     * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
+     */
+    debug?: boolean;
+
+    /**
+     * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
+     */
+    newLineOnEnter?: boolean;
+
+    /**
+     * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
+     */
+    tabCharOnTab?: boolean;
+
+    /**
+     * Allows you to use a single simple-keyboard instance for several inputs.
+     */
+    inputName?: string;
+
+    /**
+     * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     *
+     * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     */
+    maxLength?:
+      | number
+      | {
+          [inputName: string]: number;
+        };
+
+    /**
+     * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+     */
+    syncInstanceInputs?: boolean;
+
+    /**
+     * Enable highlighting of keys pressed on physical keyboard.
+     */
+    physicalKeyboardHighlight?: boolean;
+
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+
+    /**
+     * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+     */
+    onKeyPress?: (button: string) => any;
+
+    /**
+     * Executes the callback function on input change. Returns the current input's string.
+     */
+    onChange?: (input: string) => any;
+
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender?: () => void;
+
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit?: () => void;
+
+    /**
+     * Executes the callback function on input change. Returns the input object with all defined inputs.
+     */
+    onChangeAll?: (inputs: any) => any;
+  }
+
+  class Keyboard {
+    constructor(selector: string, options: KeyboardOptions);
+    constructor(options: KeyboardOptions);
+    options: KeyboardOptions;
+
+    /**
+     * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    addButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    removeButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Clear the keyboard's input.
+     *
+     * @param {string} [inputName] optional - the internal input to select
+     */
+    clearInput(inputName?: string): void;
+
+    /**
+     * Get the keyboard’s input (You can also get it from the onChange prop).
+     * @param  {string} [inputName] optional - the internal input to select
+     */
+    getInput(inputName?: string): string;
+
+    /**
+     * Set the keyboard’s input.
+     * @param  {string} input the input value
+     * @param  {string} inputName optional - the internal input to select
+     */
+    setInput(input: string, inputName?: string): void;
+
+    /**
+     * Set new option or modify existing ones after initialization.
+     * @param  {KeyboardOptions} option The option to set
+     */
+    setOptions(options: KeyboardOptions): void;
+
+    /**
+     * Send a command to all simple-keyboard instances at once (if you have multiple instances).
+     * @param  {function(instance: object, key: string)} callback Function to run on every instance
+     */
+    dispatch(callback: (instance: any, key: string) => void): void;
+
+    /**
+     * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
+     * @param  {string} button The button layout name to select
+     */
+    getButtonElement(button: string): HTMLElement | HTMLElement[];
+  }
+
+  export default Keyboard;
+}

src/lib/components/Keyboard.css

@@ -57,6 +57,13 @@ body, html {
   justify-content: center;
  }
 
+ /* When using option "useButtonTag" */
+ .simple-keyboard button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
+}
+
  .simple-keyboard.hg-theme-default .hg-button:active {
   background: #e4e4e4;
  }

src/lib/components/Keyboard.js

@@ -18,7 +18,7 @@ class SimpleKeyboard {
    * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
    */
   constructor(...params){
-    let keyboardDOMQuery = typeof params[0] === "string" ? params[0] : '.simple-keyboard';
+    let keyboardDOMQuery = typeof params[0] === "string" ? params[0] : ".simple-keyboard";
     let options = typeof params[0] === "object" ? params[0] : params[1];
 
     if(!options)
@@ -50,18 +50,21 @@ class SimpleKeyboard {
      * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
+     * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
-     * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have. 
+     * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
      * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
      * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
+     * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
      */
     this.options = options;
     this.options.layoutName = this.options.layoutName || "default";
     this.options.theme = this.options.theme || "hg-theme-default";
     this.options.inputName = this.options.inputName || "default";
+    this.options.preventMouseDownDefault = this.options.preventMouseDownDefault || false;
 
     /**
      * @type {object} Classes identifying loaded plugins
@@ -294,7 +297,7 @@ class SimpleKeyboard {
    */
   clearInput(inputName){
     inputName = inputName || this.options.inputName;
-    this.input[this.options.inputName] = '';
+    this.input[inputName] = '';
 
     /**
      * Enforce syncInstanceInputs, if set
@@ -504,40 +507,59 @@ class SimpleKeyboard {
    * Retrieves the current cursor position within a input or textarea (if any)
    */
   handleCaret(){
+    /**
+     * Only first instance should insall the caret handling events
+     */
+    this.caretPosition = null;
+    let simpleKeyboardInstances = window['SimpleKeyboardInstances'];
+
+    if(
+      (
+        simpleKeyboardInstances &&
+        Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass)
+      ) ||
+      !simpleKeyboardInstances
+    ){
     if(this.options.debug){
-      console.log("Caret handling started");
+        console.log(`Caret handling started (${this.keyboardDOMClass})`)
     }
 
     document.addEventListener("keyup", this.caretEventHandler);
     document.addEventListener("mouseup", this.caretEventHandler);
     document.addEventListener("touchend", this.caretEventHandler);
   }
+  }
 
   /**
    * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event){
     let targetTagName;
-
     if(event.target.tagName){
       targetTagName = event.target.tagName.toLowerCase();
     }
 
+    this.dispatch(instance => {
+      if(instance.isMouseHold){
+        instance.isMouseHold = false;
+    }
+
     if(
       (targetTagName === "textarea" ||
       targetTagName === "input") &&
-      !this.options.disableCaretPositioning
+        !instance.options.disableCaretPositioning
     ){
       /**
        * Tracks current cursor position
        * As keys are pressed, text will be added/removed at that position within the input.
        */
-      this.caretPosition = event.target.selectionStart;
+        instance.caretPosition = event.target.selectionStart;
 
-      if(this.options.debug){
-        console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
+        if(instance.options.debug){
+          console.log("Caret at: ", event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
       }     
     }
+    });
   }
 
   /**
@@ -545,7 +567,7 @@ class SimpleKeyboard {
    */
   onInit(){
     if(this.options.debug){
-      console.log("Initialized");
+      console.log(`${this.keyboardDOMClass} Initialized`)
     }
 
     /**
@@ -600,7 +622,7 @@ class SimpleKeyboard {
         module.init(this);
       });
 
-      this.keyboardPluginClasses = this.keyboardPluginClasses + ' modules-loaded';
+      this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
 
       this.render();
       this.onModulesLoaded();
@@ -633,8 +655,9 @@ class SimpleKeyboard {
      */
     this.clear();
 
-    let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
+    let layoutClass = `hg-layout-${this.options.layoutName}`;
     let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
+    let useTouchEvents = this.options.useTouchEvents || false
 
     /**
      * Account for buttonTheme, if set
@@ -646,7 +669,7 @@ class SimpleKeyboard {
           let themeButtons;
 
           if(typeof themeObj.buttons === "string"){
-            themeButtons = themeObj.buttons.split(' ');
+            themeButtons = themeObj.buttons.split(" ");
           }
 
           if(themeButtons){
@@ -679,12 +702,12 @@ class SimpleKeyboard {
      * Iterating through each row
      */
     layout[this.options.layoutName].forEach((row, rIndex) => {
-      let rowArray = row.split(' ');
+      let rowArray = row.split(" ");
 
       /**
        * Creating empty row
        */
-      var rowDOM = document.createElement('div');
+      let rowDOM = document.createElement("div");
       rowDOM.className += "hg-row";
 
       /**
@@ -698,14 +721,28 @@ class SimpleKeyboard {
         /**
          * Creating button
          */
-        var buttonDOM = document.createElement('div');
+        let buttonType = this.options.useButtonTag ? "button" : "div";
+        let buttonDOM = document.createElement(buttonType);
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => {
-          this.isMouseHold = false;
-          this.handleButtonClicked(button);
+        
+        if (useTouchEvents) {
+          buttonDOM.ontouchstart = (e) => {
+            this.handleButtonClicked(button);
+            this.handleButtonMouseDown(button, e);
+          }
+          buttonDOM.ontouchend = e => this.handleButtonMouseUp();
+          buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
+        } else {
+          buttonDOM.onclick = () => {
+            this.isMouseHold = false;
+            this.handleButtonClicked(button);
+          }
+          buttonDOM.onmousedown = (e) => {
+            if (this.options.preventMouseDownDefault) e.preventDefault();
+            this.handleButtonMouseDown(button, e);
+          }
         }
-        buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
-
+        
         /**
          * Adding identifier
          */
@@ -726,7 +763,7 @@ class SimpleKeyboard {
         /**
          * Adding button label to button
          */
-        var buttonSpanDOM = document.createElement('span');
+        let buttonSpanDOM = document.createElement('span');
         buttonSpanDOM.innerHTML = buttonDisplayName;
         buttonDOM.appendChild(buttonSpanDOM);
 
@@ -756,17 +793,19 @@ class SimpleKeyboard {
      */
     this.onRender();
 
-    /**
-     * Handling mouseup
-     */
-    document.onmouseup = () => this.handleButtonMouseUp();
-
     if(!this.initialized){
       /**
        * Ensures that onInit is only called once per instantiation
        */
       this.initialized = true;
 
+      /**
+       * Handling mouseup
+       */
+      if (!useTouchEvents) {
+        document.onmouseup = () => this.handleButtonMouseUp();
+      }
+
       /**
        * Calling onInit
        */

src/lib/components/tests/Keyboard.test.js

@@ -45,6 +45,32 @@ it('Keyboard will run with debug option set', () => {
   expect(keyboard.options.debug).toBeTruthy();
 });
 
+it('Keyboard will use touch events', () => {
+  let touched = false
+
+  testUtil.clear()
+
+  document.body.innerHTML = `
+    <div id="keyboard"></div>
+  `;
+
+  const keyboard = new Keyboard('#keyboard', {
+    useTouchEvents: true,
+    onChange: () => touched = true,
+    layout: {
+      default: ["q"]
+    }
+  });
+
+  keyboard.getButtonElement("q").ontouchstart();
+  keyboard.getButtonElement("q").ontouchend();
+  keyboard.getButtonElement("q").ontouchcancel();
+  
+  expect(keyboard.options.useTouchEvents).toBeTruthy();
+  expect(touched).toBeTruthy();
+  expect(keyboard.getInput()).toBe('q');
+})
+
 it('Keyboard standard buttons will work', () => {
   testUtil.setDOM();
   let keyboard = new Keyboard({
@@ -111,7 +137,9 @@ it('Keyboard onKeyPress will work', () => {
 it('Keyboard standard function buttons will not change input', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  let keyboard = new Keyboard({
+    useButtonTag: true
+  });
 
   testUtil.iterateButtons((button) => {
     if(button.getAttribute("data-skbtn") === "{shift}"){
@@ -575,6 +603,8 @@ it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', (
 
   let keyboard = new Keyboard();
 
+  keyboard.isMouseHold = true;
+
   keyboard.caretEventHandler({
     charCode: 0,
     code: "KeyF",
@@ -835,7 +865,27 @@ it('Keyboard handleButtonMouseDown will work', () => {
     target: keyboard.getButtonElement("q")
   });
 
-  keyboard.getButtonElement("q").onmousedown();
+  var clickEvent = document.createEvent('MouseEvents');
+  clickEvent.initEvent('mousedown', true, true);
+  keyboard.getButtonElement("q").dispatchEvent(clickEvent);
+  document.onmouseup();
+
+});
+
+it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+
+  keyboard.options.preventMouseDownDefault = true;
+
+  keyboard.handleButtonMouseDown("q", {
+    target: keyboard.getButtonElement("q")
+  });
+
+  var clickEvent = document.createEvent('MouseEvents');
+  clickEvent.initEvent('mousedown', true, true);
+  keyboard.getButtonElement("q").dispatchEvent(clickEvent);
   document.onmouseup();
 
 });

src/lib/services/Utilities.js

@@ -18,6 +18,7 @@ class Utilities {
     this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
     this.getUpdatedInput = this.getUpdatedInput.bind(this);
     this.updateCaretPos = this.updateCaretPos.bind(this);
+    this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
     this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
     this.camelCase = this.camelCase.bind(this);
     this.countInArray = this.countInArray.bind(this);
@@ -150,7 +151,7 @@ class Utilities {
       output = this.addStringAt(output, "\n", caretPos, moveCaret);
 
     else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
-      output = this.addStringAt(output, button[button.length - 2], caretPos);
+      output = this.addStringAt(output, button[button.length - 2], caretPos, moveCaret);
     }
     else if(button === "{numpaddivide}")
       output = this.addStringAt(output, '/', caretPos, moveCaret);
@@ -183,14 +184,37 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus){
-    if(minus){
-      if(this.simpleKeyboardInstance.caretPosition > 0)
-        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length;
-    } else {
-      this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
+    let newCaretPos = this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
+
+    if(this.simpleKeyboardInstance.options.syncInstanceInputs){
+      this.simpleKeyboardInstance.dispatch(instance => {
+        instance.caretPosition = newCaretPos;
+      });
     }
   }
 
+  /**
+   * Action method of updateCaretPos
+   * 
+   * @param  {object} instance The instance whose position should be updated
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPosAction(instance, length, minus){
+    if(minus){
+      if(instance.caretPosition > 0)
+      instance.caretPosition = instance.caretPosition - length;
+    } else {
+      instance.caretPosition = instance.caretPosition + length;
+    }
+
+    if(this.simpleKeyboardInstance.options.debug){
+      console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`);
+    }
+
+    return instance.caretPosition;
+  }
+
   /**
    * Adds a string to the input at a given position
    * 
@@ -216,10 +240,6 @@ class Utilities {
 
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", position);
-    }
-
     return output;
   }
 
@@ -268,10 +288,6 @@ class Utilities {
       }
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
-    }
-
     return output;
   }
   /**
@@ -355,7 +371,6 @@ class Utilities {
   countInArray(array, value){
     return array.reduce((n, x) => n + (x === value), 0);
   }
-
 }
 
 export default Utilities;

src/lib/services/tests/Utilities.test.js

@@ -210,6 +210,18 @@ it('Keyboard standard button will affect input', () => {
   }
 });
 
+it('Keyboard updateCaretPos will work with minus', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+  keyboard.options.syncInstanceInputs = true;
+
+  keyboard.caretPosition = 5;
+  keyboard.utilities.updateCaretPos(2, true);
+
+  expect(keyboard.caretPosition).toBe(3);
+});
+
 it('Keyboard updateCaretPos will work with minus', () => {
   testUtil.setDOM();