TiddlyWiki5/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid

caption: keyboard
created: 20140302192136805
modified: 20160429175258940
tags: Widgets
title: KeyboardWidget
type: text/vnd.tiddlywiki

! Introduction

The keyboard widget allows ActionWidgets to be triggered by specific key combinations. There is also a shorthand for generating [[Messages]] via the `message` and `param` attributes.

! Content and Attributes

The content of the `<$keyboard>` widget is rendered normally. The keyboard shortcuts only take effect when the focus is within the contained content.

|!Attribute |!Description |
|actions |A string containing ActionWidgets to be triggered when the key combination is detected |
|message |The title of the [[WidgetMessage|Messages]] to generate |
|param |The parameter to be passed with the [[WidgetMessage|Messages]] |
|key |Key string identifying the key(s) to be trapped (see below) |
|class |A CSS class to be assigned to the generated HTML DIV element |

! Key Strings

Key strings are made up of one or more key specifiers separated by spaces. Each key specifier is zero or more of the modifiers <kbd>alt</kbd>, <kbd>shift</kbd>, <kbd>ctrl</kbd> or <kbd>meta</kbd> followed by the name of a key, all joined with "+" plus or "-" minus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>enter</kbd> or <kbd>escape</kbd>.

For example:

```
A
shift+A
shift+escape
ctrl+enter
ctrl+shift+alt+A
```
Add styling for `<kbd>` elements 2015-05-14 09:16:29 +00:00			`caption: keyboard`
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00			`created: 20140302192136805`
Add support for assigning action widgets via the `actions` attribute This is quite a big change: a new way to invoke action widgets. The advantage is that it solves #2217 and #1564, a long running problem that prevented us from adding action widgets to widgets that modify the store. This commit adds the new technique for the button and keyboard widgets, but also extends the select widget to trigger action widgets for the first time 2016-04-29 17:53:23 +00:00			`modified: 20160429175258940`
More mangling of reference docs 2014-09-10 23:06:19 +00:00			`tags: Widgets`
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00			`title: KeyboardWidget`
			`type: text/vnd.tiddlywiki`

			`! Introduction`

Introduce text editor toolbar (#2315) Tada! 2016-04-22 07:36:29 +00:00			The keyboard widget allows ActionWidgets to be triggered by specific key combinations. There is also a shorthand for generating [[Messages]] via the `message` and `param` attributes.
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00
			`! Content and Attributes`

Introduce text editor toolbar (#2315) Tada! 2016-04-22 07:36:29 +00:00			The content of the `<$keyboard>` widget is rendered normally. The keyboard shortcuts only take effect when the focus is within the contained content.
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00
			`\|!Attribute \|!Description \|`
Add support for assigning action widgets via the `actions` attribute This is quite a big change: a new way to invoke action widgets. The advantage is that it solves #2217 and #1564, a long running problem that prevented us from adding action widgets to widgets that modify the store. This commit adds the new technique for the button and keyboard widgets, but also extends the select widget to trigger action widgets for the first time 2016-04-29 17:53:23 +00:00			`\|actions \|A string containing ActionWidgets to be triggered when the key combination is detected \|`
Fix bad links 2014-10-10 20:06:48 +00:00			`\|message \|The title of the [[WidgetMessage\|Messages]] to generate \|`
			`\|param \|The parameter to be passed with the [[WidgetMessage\|Messages]] \|`
Introduce text editor toolbar (#2315) Tada! 2016-04-22 07:36:29 +00:00			`\|key \|Key string identifying the key(s) to be trapped (see below) \|`
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00			`\|class \|A CSS class to be assigned to the generated HTML DIV element \|`

			`! Key Strings`

Update document in tiddlywiki.com edition * Add string '.htm' to 'Saving with TiddlyIE' * Change external links to match locale with wiki language * Add instructions for use to 'Saving on Android' * Change string in 'task' * Change instructions for use in 'Saving on iPad/iPhone' * Add newline to 'TiddlyDesktop Releases' * Remove caption from 'Serving TW5 from Android' * Change link to external in tiddlers which tagged 'Editions' * Remove string 'index.html' from 'Some of the things you can do with TiddlyWiki' * Change link 'TiddlyWiki Groups' to 'Forums' in tiddlers which tagged 'Community' * Remove CamelCase link 'TiddlyWiki' from tiddlers tagged 'Community' * Change string 'done' to 'Upgrade' in 'UpgradeMechanism' * Change buttons to images in 'How to export tiddlers' * Add images about buttons to tiddlers * Add quotation mark to text 'edit' in 'Signing the Contributor License Agreement' * Rename 'UsingSVG' to 'Using SVG' * Change link 'TypedBlockWikiText' to 'Typed Blocks in WikiText' in 'Using SVG' * Add tiddler 'Using Stamp' * Add 'rel="noopener noreferrer"' to external links * Add description about 'rel="noreferrer"' to 'HTML in WikiText' * Add link of prerelease version about translators edition, and how to translate on Node.js, in 'Translate TiddlyWiki into your language' * Change string 'dropdown' to 'tab' in 'Installing a plugin from the plugin library' * Add download button to 'Empty Edition' 2016-05-03 02:28:06 +00:00			`Key strings are made up of one or more key specifiers separated by spaces. Each key specifier is zero or more of the modifiers <kbd>alt</kbd>, <kbd>shift</kbd>, <kbd>ctrl</kbd> or <kbd>meta</kbd> followed by the name of a key, all joined with "+" plus or "-" minus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>enter</kbd> or <kbd>escape</kbd>.`
Add docs for keyboard widget 2014-03-02 19:30:13 +00:00
			`For example:`

			```
			`A`
			`shift+A`
			`shift+escape`
			`ctrl+enter`
			`ctrl+shift+alt+A`
			```