Added physicalKeyboardHighlightPress option. Fixes #735

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.31.12
+ *   simple-keyboard v2.32.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)

build/index.d.ts

@@ -87,6 +87,21 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlight?: boolean;
 
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: 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;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -107,16 +122,6 @@ declare module 'simple-keyboard' {
      */
     stopMouseUpPropagation?: 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.
      */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.31.12",
+  "version": "2.32.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.31.12",
+  "version": "2.32.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",

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

@@ -87,6 +87,21 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlight?: boolean;
 
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: 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;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -107,16 +122,6 @@ declare module 'simple-keyboard' {
      */
     stopMouseUpPropagation?: 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.
      */

src/lib/components/Keyboard.js

@@ -64,12 +64,13 @@ 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} physicalKeyboardHighlightPress Presses keys highlighted by physicalKeyboardHighlight
+     * @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 {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
      * @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events.
      * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
      * @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
-     * @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 {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).

src/lib/services/PhysicalKeyboard.js

@@ -34,11 +34,24 @@ class PhysicalKeyboard {
           options.physicalKeyboardHighlightBgColor || "#dadce4";
         buttonDOM.style.color =
           options.physicalKeyboardHighlightTextColor || "black";
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerdown ||
+            buttonDOM.onmousedown ||
+            buttonDOM.ontouchstart ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }
 
   handleHighlightKeyUp(event) {
+    const options = this.getOptions();
     const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
@@ -48,6 +61,18 @@ class PhysicalKeyboard {
 
       if (buttonDOM && buttonDOM.removeAttribute) {
         buttonDOM.removeAttribute("style");
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerup ||
+            buttonDOM.onmouseup ||
+            buttonDOM.ontouchend ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }

src/lib/services/Utilities.js

@@ -430,6 +430,8 @@ class Utilities {
         word.length ? str + word[0].toUpperCase() + word.slice(1) : str
       );
   }
+
+  static noop = () => {};
 }
 
 export default Utilities;

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

@@ -113,4 +113,57 @@ it('PhysicalKeyboard will work with F1-F12 keys', () => {
       tagName: "input"
     }
   }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress (touch)', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    useTouchEvents: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
 });