<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../../"> <title data-ice="title">SimpleKeyboard | simple-keyboard</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><div class="header-notice"> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import SimpleKeyboard from '<span><a href="file/src/lib/components/Keyboard.js.html#lineNumber15">simple-keyboard/src/lib/components/Keyboard.js</a></span>'</code></pre></div> <span data-ice="access">public</span> <span data-ice="kind">class</span> <span data-ice="source">| <span><a href="file/src/lib/components/Keyboard.js.html#lineNumber15">source</a></span></span> </div> <div class="self-detail detail"> <h1 data-ice="name">SimpleKeyboard</h1> <div class="description" data-ice="description"><p>Root class for simple-keyboard This class:</p> <ul> <li>Parses the options</li> <li>Renders the rows and buttons</li> <li>Handles button functionality</li> </ul> </div> </div> <div data-ice="constructorSummary"><h2>Constructor Summary</h2><table class="summary" data-ice="summary"> <thead><tr><td data-ice="title" colspan="3">Public Constructor</td></tr></thead> <tbody> <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/components/Keyboard.js~SimpleKeyboard.html#instance-constructor-constructor">constructor</a></span></span><span class="code" data-ice="signature">(params: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></span>)</span> </p> </div> <div> <div data-ice="description"><p>Creates an instance of SimpleKeyboard</p> </div> </div> </td> <td> </td> </tr> </tbody> </table> </div> <div data-ice="memberSummary"><h2>Member Summary</h2><table class="summary" data-ice="summary"> <thead><tr><td data-ice="title" colspan="3">Public Members</td></tr></thead> <tbody> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-addButtonTheme">addButtonTheme</a></span></span><span class="code" data-ice="signature">(buttons: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, className: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Adds/Modifies an entry to the <code>buttonTheme</code>.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-buttonElements">buttonElements</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> </p> </div> <div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-caretEventHandler">caretEventHandler</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Called by <span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-handleCaret">handleCaret</a></span> when an event that warrants a cursor position update is triggered</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-clear">clear</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Remove all keyboard rows and reset keyboard values.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-clearInput">clearInput</a></span></span><span class="code" data-ice="signature">(inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Clear the keyboard’s input.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-dispatch">dispatch</a></span></span><span class="code" data-ice="signature">(callback: <span><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span><span>(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, key: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>)</span></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Send a command to all simple-keyboard instances at once (if you have multiple instances).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-getButtonElement">getButtonElement</a></span></span><span class="code" data-ice="signature">(button: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Get the DOM Element of a button.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-getInput">getInput</a></span></span><span class="code" data-ice="signature">(inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Get the keyboard’s input (You can also get it from the onChange prop).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-handleButtonClicked">handleButtonClicked</a></span></span><span class="code" data-ice="signature">(button: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Handles clicks made to keyboard buttons</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-handleCaret">handleCaret</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Retrieves the current cursor position within a input or textarea (if any)</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-input">input</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> </p> </div> <div> <div data-ice="description"><p>simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable <code>keyboard.input</code>).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-keyboardDOM">keyboardDOM</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Processing options</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-keyboardDOMClass">keyboardDOMClass</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span> </p> </div> <div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-onInit">onInit</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Executes the callback function once simple-keyboard is rendered for the first time (on initialization).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-onRender">onRender</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-options">options</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> </p> </div> <div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-physicalKeyboardInterface">physicalKeyboardInterface</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Physical Keyboard support</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-removeButtonTheme">removeButtonTheme</a></span></span><span class="code" data-ice="signature">(buttons: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, className: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Removes/Amends an entry to the <code>buttonTheme</code>.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-render">render</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Renders rows and buttons as per options</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-replaceInput">replaceInput</a></span></span><span class="code" data-ice="signature">(inputObj: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Replace the input object (<code>keyboard.input</code>)</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-setInput">setInput</a></span></span><span class="code" data-ice="signature">(input: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Set the keyboard’s input.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-setOptions">setOptions</a></span></span><span class="code" data-ice="signature">(option: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Set new option or modify existing ones after initialization.</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-syncInstanceInputs">syncInstanceInputs</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Send a command to all simple-keyboard instances (if you have several instances).</p> </div> </div> </td> <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/components/Keyboard.js~SimpleKeyboard.html#instance-member-utilities">utilities</a></span></span><span class="code" data-ice="signature">: <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>Initializing Utilities</p> </div> </div> </td> <td> </td> </tr> </tbody> </table> </div> <div data-ice="constructorDetails"><h2 data-ice="title">Public Constructors</h2> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-constructor-constructor"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">constructor</span><span class="code" data-ice="signature">(params: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></span>)</span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber20">source</a></span></span> </span> </h3> <div data-ice="description"><p>Creates an instance of SimpleKeyboard</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">params</td> <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>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.</p> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div data-ice="memberDetails"><h2 data-ice="title">Public Members</h2> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-addButtonTheme"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">addButtonTheme</span><span class="code" data-ice="signature">(buttons: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, className: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber277">source</a></span></span> </span> </h3> <div data-ice="description"><p>Adds/Modifies an entry to the <code>buttonTheme</code>. Basically a way to add a class to a button.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-buttonElements"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">buttonElements</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber91">source</a></span></span> </span> </h3> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-caretEventHandler"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">caretEventHandler</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber410">source</a></span></span> </span> </h3> <div data-ice="description"><p>Called by <span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-handleCaret">handleCaret</a></span> when an event that warrants a cursor position update is triggered</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-clear"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">clear</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber251">source</a></span></span> </span> </h3> <div data-ice="description"><p>Remove all keyboard rows and reset keyboard values. Used interally between re-renders.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-clearInput"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">clearInput</span><span class="code" data-ice="signature">(inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber186">source</a></span></span> </span> </h3> <div data-ice="description"><p>Clear the keyboard’s input.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-dispatch"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">dispatch</span><span class="code" data-ice="signature">(callback: <span><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span><span>(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, key: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>)</span></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber261">source</a></span></span> </span> </h3> <div data-ice="description"><p>Send a command to all simple-keyboard instances at once (if you have multiple instances).</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-getButtonElement"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">getButtonElement</span><span class="code" data-ice="signature">(button: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber379">source</a></span></span> </span> </h3> <div data-ice="description"><p>Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-getInput"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">getInput</span><span class="code" data-ice="signature">(inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber201">source</a></span></span> </span> </h3> <div data-ice="description"><p>Get the keyboard’s input (You can also get it from the onChange prop).</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-handleButtonClicked"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">handleButtonClicked</span><span class="code" data-ice="signature">(button: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber121">source</a></span></span> </span> </h3> <div data-ice="description"><p>Handles clicks made to keyboard buttons</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-handleCaret"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">handleCaret</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber397">source</a></span></span> </span> </h3> <div data-ice="description"><p>Retrieves the current cursor position within a input or textarea (if any)</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-input"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">input</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber80">source</a></span></span> </span> </h3> <div data-ice="description"><p>simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable <code>keyboard.input</code>). This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.</p> </div> <div data-ice="properties"><div data-ice="properties"> <h4 data-ice="title">Properties:</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">default</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>Default SimpleKeyboard internal input.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">myInputName</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>Example input that can be set through <code>options.inputName:"myInputName"</code>.</p> </td> </tr> </tbody> </table> </div> </div> <div data-ice="example"> <h4>Example:</h4> <div class="example-doc" data-ice="exampleDoc"> <pre class="prettyprint source-code"><code data-ice="exampleCode">// To get entered input let input = keyboard.getInput(); // To clear entered input. keyboard.clearInput();</code></pre> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-keyboardDOM"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">keyboardDOM</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber35">source</a></span></span> </span> </h3> <div data-ice="description"><p>Processing options</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-keyboardDOMClass"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">keyboardDOMClass</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber86">source</a></span></span> </span> </h3> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-onInit"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">onInit</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber432">source</a></span></span> </span> </h3> <div data-ice="description"><p>Executes the callback function once simple-keyboard is rendered for the first time (on initialization).</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-onRender"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">onRender</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber449">source</a></span></span> </span> </h3> <div data-ice="description"><p>Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-options"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">options</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber61">source</a></span></span> </span> </h3> <div data-ice="properties"><div data-ice="properties"> <h4 data-ice="title">Properties:</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">layout</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>Modify the keyboard layout.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">layoutName</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> <td data-ice="appendix"></td> <td data-ice="description"><p>Specifies which layout should be used.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">display</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>Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">mergeDisplay</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>By default, when you set the display property, you replace the default one. This setting merges them instead.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">theme</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> <td data-ice="appendix"></td> <td data-ice="description"><p>A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">buttonTheme</td> <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>A prop to add your own css classes to one or several buttons.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">debug</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>Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">newLineOnEnter</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>Specifies whether clicking the “ENTER” button will input a newline (\n) or not.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">tabCharOnTab</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>Specifies whether clicking the “TAB” button will input a tab character (\t) or not.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">inputName</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> <td data-ice="appendix"></td> <td data-ice="description"><p>Allows you to use a single simple-keyboard instance for several inputs.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">maxLength</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>Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">maxLength</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>Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">syncInstanceInputs</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>When set to true, this option synchronizes the internal input of every simple-keyboard instance.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">physicalKeyboardHighlight</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>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">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> <td data-ice="appendix"></td> <td data-ice="description"><p>Define the text color that the physical keyboard highlighted key should have.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">physicalKeyboardHighlightBgColor</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> <td data-ice="appendix"></td> <td data-ice="description"><p>Define the background color that the physical keyboard highlighted key should have.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">onKeyPress</td> <td data-ice="type" class="code"><span><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span><span>(button: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>)</span>: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">onChange</td> <td data-ice="type" class="code"><span><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span><span>(input: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>)</span>: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>Executes the callback function on input change. Returns the current input’s string.</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">onRender</td> <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">onInit</td> <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>Executes the callback function once simple-keyboard is rendered for the first time (on initialization).</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" class="code" data-depth="0">onChangeAll</td> <td data-ice="type" class="code"><span><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a></span><span>(inputs: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>)</span>: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>Executes the callback function on input change. Returns the input object with all defined inputs.</p> </td> </tr> </tbody> </table> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-physicalKeyboardInterface"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">physicalKeyboardInterface</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber115">source</a></span></span> </span> </h3> <div data-ice="description"><p>Physical Keyboard support</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-removeButtonTheme"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">removeButtonTheme</span><span class="code" data-ice="signature">(buttons: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, className: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber327">source</a></span></span> </span> </h3> <div data-ice="description"><p>Removes/Amends an entry to the <code>buttonTheme</code>. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-render"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">render</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber457">source</a></span></span> </span> </h3> <div data-ice="description"><p>Renders rows and buttons as per options</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-replaceInput"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">replaceInput</span><span class="code" data-ice="signature">(inputObj: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber233">source</a></span></span> </span> </h3> <div data-ice="description"><p>Replace the input object (<code>keyboard.input</code>)</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-setInput"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">setInput</span><span class="code" data-ice="signature">(input: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>, inputName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber218">source</a></span></span> </span> </h3> <div data-ice="description"><p>Set the keyboard’s input.</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-setOptions"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">setOptions</span><span class="code" data-ice="signature">(option: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber241">source</a></span></span> </span> </h3> <div data-ice="description"><p>Set new option or modify existing ones after initialization. </p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-syncInstanceInputs"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">syncInstanceInputs</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber176">source</a></span></span> </span> </h3> <div data-ice="description"><p>Send a command to all simple-keyboard instances (if you have several instances).</p> </div> <div data-ice="properties"> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="instance-member-utilities"> <span class="access" data-ice="access">public</span> <span class="code" data-ice="name">utilities</span><span class="code" data-ice="signature">: <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber30">source</a></span></span> </span> </h3> <div data-ice="description"><p>Initializing Utilities</p> </div> <div data-ice="properties"> </div> </div> </div> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>