{"library":"simple-keyboard","title":"Simple-Keyboard: JavaScript Virtual Keyboard","description":"Simple-Keyboard is a robust, lightweight, and highly customizable JavaScript virtual keyboard library designed for web applications. Currently at version 3.8.133, it maintains a stable release cadence with frequent updates addressing bugs and adding features. Key differentiators include broad browser compatibility (down to IE11 with specific bundles), built-in TypeScript support since v3.0.0, and a modular architecture allowing extensions for autocorrect, input masks, and key navigation. It is designed to be framework-agnostic, easily integrating into vanilla JavaScript, React, Angular, and Vue projects, providing an on-screen input solution suitable for touchscreens, kiosks, and general web input fields.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install simple-keyboard"],"cli":null},"imports":["import SimpleKeyboard from 'simple-keyboard';","import type { KeyboardOptions } from 'simple-keyboard';","import 'simple-keyboard/build/css/index.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import SimpleKeyboard from 'simple-keyboard';\nimport 'simple-keyboard/build/css/index.css';\n\n// Create a target input element in your HTML: <input class=\"input\" value=\"\" />\n// And a container for the keyboard: <div class=\"simple-keyboard\"></div>\n\nconst inputElement = document.querySelector('.input') as HTMLInputElement;\n\nconst keyboard = new SimpleKeyboard({\n  onChange: (input: string) => onChange(input),\n  onKeyPress: (button: string) => onKeyPress(button),\n  input: inputElement || undefined, // Pass the input element or its selector\n  theme: 'hg-theme-default hg-layout-default',\n  layout: {\n    default: [\n      'q w e r t y u i o p',\n      'a s d f g h j k l',\n      '{shift} z x c v b n m {backspace}',\n      '{numbers} {space} {ent}'\n    ],\n    shift: [\n      'Q W E R T Y U I O P',\n      'A S D F G H J K L',\n      '{shift} Z X C V B N M {backspace}',\n      '{numbers} {space} {ent}'\n    ],\n    numbers: [\n      '1 2 3',\n      '4 5 6',\n      '7 8 9',\n      '{abc} 0 .'\n    ]\n  }\n});\n\nfunction onChange(input: string) {\n  if (inputElement) {\n    inputElement.value = input;\n  }\n  console.log('Input changed:', input);\n}\n\nfunction onKeyPress(button: string) {\n  console.log('Button pressed:', button);\n\n  if (button === '{shift}' || button === '{lock}') {\n    handleShift();\n  }\n  if (button === '{numbers}' || button === '{abc}') {\n    handleLayoutChange(button);\n  }\n}\n\nfunction handleShift() {\n  const currentLayout = keyboard.options.layoutName;\n  const newLayout = currentLayout === 'default' ? 'shift' : 'default';\n  keyboard.setOptions({ layoutName: newLayout });\n}\n\nfunction handleLayoutChange(button: string) {\n  const newLayout = button === '{numbers}' ? 'numbers' : 'default';\n  keyboard.setOptions({ layoutName: newLayout });\n}","lang":"typescript","description":"Initializes simple-keyboard with a custom layout, demonstrating how to handle input changes, key presses, and dynamically switch between 'default', 'shift', and 'numbers' layouts.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}