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 edit or add new buttons to the keyboard

You can edit or add new buttons to the keyboard by using the layout option.

If you would like to change the label of certain buttons while keeping their layout names intact, you can use the display option.

Demos: JS (angular + vue) react
PRSS Site Creator: Desktop blogging with AI, for free. Learn more →
  • PreviousQuestions & Answers
  • NextHow to make my keyboard responsive?

Support development of this library:

Privacy PolicyTerms of Use
Built with PRSS
On this page