HodgefHodgef
  • Home
  • Blog
  • Projects
    • Apiker
    • PRSS Site Creator
    • simple-keyboard
simple-keyboard
  • Welcome
  • Getting Started
    • React
    • Angular
    • Vue
  • Documentation
    • Options
      • layout
      • layoutName
      • display
      • mergeDisplay
      • theme
      • buttonAttributes
      • buttonTheme
      • debug
      • useMouseEvents
      • useTouchEvents
      • autoUseTouchEvents
      • preventMouseDownDefault
      • preventMouseUpDefault
      • stopMouseDownPropagation
      • stopMouseUpPropagation
      • disableCaretPositioning
      • disableCandidateNormalization
      • useButtonTag
      • newLineOnEnter
      • tabCharOnTab
      • inputName
      • maxLength
      • inputPattern
      • disableRowButtonContainers
      • disableButtonHold
      • syncInstanceInputs
      • physicalKeyboardHighlight
      • physicalKeyboardHighlightPress
      • physicalKeyboardHighlightTextColor
      • physicalKeyboardHighlightBgColor
      • physicalKeyboardHighlightPressUseClick
      • physicalKeyboardHighlightPressUsePointerEvents
      • physicalKeyboardHighlightPreventDefault
      • onKeyPress
      • onChange
      • onRender
      • beforeFirstRender
      • beforeRender
      • onInit
      • onKeyReleased
      • onChangeAll
      • rtl
      • updateCaretOnSelectionChange
      • layoutCandidates
      • enableLayoutCandidates
      • enableLayoutCandidatesKeyPress
      • layoutCandidatesPageSize
      • layoutCandidatesCaseSensitiveMatch
      • excludeFromLayout
      • clickOnMouseDown
      • beforeInputUpdate
      • baseClass
    • Methods
      • clearInput
      • getInput
      • setInput
      • replaceInput
      • setOptions
      • destroy
      • dispatch
      • getButtonElement
      • addButtonTheme
      • removeButtonTheme
      • recurseButtons
      • setCaretPosition
      • getCaretPosition
      • getCaretPositionEnd
  • Modules
    • Layouts
    • Autocorrect
    • Input Mask
    • Key Navigation
    • Swipe Keyboard
  • Questions & Answers
    • Edit or add new buttons
    • How to make my keyboard responsive?
    • How to set the keys to a different language
    • Change colors and design
    • Give a different class to the keyboard
    • Style a group of buttons
    • How to make the gap between the buttons clickable?
    • Usage with multiple inputs
    • Show/hide toggling
    • Adding multiple keyboards
    • Synchronize keyboard instances
    • Different Shift and Caps Lock behavior
    • Is Internet Explorer supported?
    • Fixing KEYBOARD_DOM_ERROR
  • Demos

How to synchronize your keyboard instances

If you have multiple keyboard instances and want to keep their buffer in sync, set the syncInstanceInputs option to true.

If you want to send a command to all your simple-keyboard instances at once, you can use the dispatch method.

Here's a demo with both these features in action:

Demos: JS


Here's an example of a full keyboard made out of multiple simple-keyboard instances:

Demos: JS
PRSS Site Creator: Desktop blogging with AI, for free. Learn more →
  • PreviousAdding multiple keyboards
  • NextDifferent Shift and Caps Lock behavior

Support development of this library:

Privacy PolicyTerms of Use
Built with PRSS
On this page