Adding multiple input demo, per request

src/demo/App.js

@@ -1,5 +1,5 @@
 import Keyboard from '../lib';
-import './App.css';
+import './css/App.css';
 
 class App {
   constructor(){
@@ -17,6 +17,15 @@ class App {
     });
   
     this.keyboard.setInput("Hello World!");
+
+    /**
+     * Adding preview (demo only)
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+    <div class="simple-keyboard-preview">
+      <textarea class="input" readonly>Hello World!</textarea>
+    </div>
+    `);
   
     console.log(this.keyboard);
   }

src/demo/MultipleInputsDemo.js

@@ -0,0 +1,77 @@
+import Keyboard from '../lib';
+import './css/MultipleInputsDemo.css';
+
+class App {
+  constructor(){
+    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+    this.layoutName = "default";
+  }
+
+  onDOMLoaded = () => {
+    this.keyboard = new Keyboard({
+      debug: true,
+      layoutName: this.layoutName,
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button)
+    });
+
+    /**
+     * Adding preview (demo only)
+     * In production, this would be part of your HTML file
+     */
+    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
+      <div>
+        <label>Input 1</label>
+        <input class="input" id="input1" value=""/>
+      </div>
+      <div>
+        <label>Input 2</label>
+        <input class="input" id="input2" value=""/>
+      </div>
+    `);
+
+    /**
+     * Changing active input onFocus
+     */
+    document.querySelectorAll('.input')
+      .forEach(input => input.addEventListener('focus', this.onInputFocus));
+  
+    console.log(this.keyboard);
+  }
+
+  onInputFocus = event => {
+    this.selectedInput = `#${event.target.id}`;
+    
+    this.keyboard.setOptions({
+      inputName: event.target.id
+    });
+  }
+
+  onChange = input => {
+    let currentInput = this.selectedInput || '.input';
+    document.querySelector(currentInput).value = input;
+  }
+
+  onKeyPress = button => {
+    console.log("Button pressed", button);
+  
+      /**
+       * Shift functionality
+       */
+      if(button === "{lock}" || button === "{shift}")
+        this.handleShiftButton();
+  }
+
+  handleShiftButton = () => {
+    let layoutName = this.layoutName;
+    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
+  
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+
+}
+
+export default App;

src/demo/css/MultipleInputsDemo.css

@@ -0,0 +1,40 @@
+#root {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+
+#root .screenContainer {
+  background: rgba(0,0,0,0.8);
+  border: 20px solid;
+  height: 300px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+#root .inputContainer {
+  color: white;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: monospace;
+  width: 100%;
+  height: 100%;
+}
+
+.simple-keyboard.hg-layout-custom {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+input {
+  padding: 10px;
+  margin: 10px 0;
+}
+
+label {
+  display: block;
+}

src/demo/index.js

@@ -3,13 +3,4 @@ import App from './App';
 /**
  * Initializing demo
  */
-new App();
-
-/**
- * Adding preview (demo only)
- */
-document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
-  <div class="simple-keyboard-preview">
-    <textarea class="input" readonly>Hello World!</textarea>
-  </div>
-`);
+new App();