HTML Keyboard Input element
(
<kbd>
) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
By convention, the
用户代理
defaults to rendering the contents of a
<kbd>
element using its default monospace font, although this is not mandated by the HTML standard.
<kbd>
may be nested in various combinations with the
<samp>
(Sample Output) element to represent various forms of input or output based on visual cues.
| 内容类别 | 流内容 , 措词内容 ，可触及内容。 |
|---|---|
| 准许内容 | 措词内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
Other elements can be used in tandem with
<kbd>
to represent more specific scenarios:
<kbd>
element within another
<kbd>
element represents an actual key or other unit of input as a portion of a larger input. See
Representing keystrokes within an input
下文。
<kbd>
element inside a
<samp>
element represents input that has been echoed back to the user by the system. See
Echoed input
, below, for an example.
<samp>
element
在
<kbd>
element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under
Representing onscreen input options
下文。
You can define a custom style to override the browser's default font selection for the
<kbd>
element, although the user's preferences may potentially override your CSS.
<p>Use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".</p>
To describe an input comprised of multiple keystrokes, you can nest multiple
<kbd>
elements, with an outer
<kbd>
element representing the overall input and each individual keystroke or component of the input enclosed within its own
<kbd>
.
First, let's look at what this looks like as just plain HTML.
<p>You can also create a new document using the keyboard shortcut <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p>
This wraps the entire key sequence in an outer
<kbd>
element, then each individual key within its own, in order to denote the components of the sequence.
注意：
You don't need to do all this wrapping; you can choose to simplify it by leaving out the external
<kbd>
element. In other words, simplifying this to just
<kbd>Ctrl</kbd>+<kbd>N</kbd>
would be perfectly valid.
Depending on your style sheet, though, you may find it useful to do this kind of nesting.
The output looks like this without a style sheet applied:
We can make more sense of this by adding some CSS:
We add a new style for
<kbd>
elements,
key
, which we can apply when rendering keyboard keys:
kbd.key {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}
Then we update the HTML to use this class on the keys in the output to be presented:
<p>You can also create a new document by pressing <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.</p>
The result is just what we want!
Nesting a
<kbd>
element inside a
<samp>
element represents input that has been echoed back to the user by the system.
<p>If a syntax error occurs, the tool will output the initial command you typed for your review:</p> <blockquote> <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> </blockquote>
Nesting a
<samp>
element
在
<kbd>
element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.
For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:
<p>To create a new file, choose the menu option <kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New Document</samp></kbd></kbd>.</p> <p>Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once you've entered the name of the new file.</p>
This does some interesting nesting. For the menu option description, the entire input is enclosed in a
<kbd>
element. Then, inside that, both the menu and menu item names are contained within both
<kbd>
and
<samp>
, indicating an input which is selected from a screen widget.
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<kbd>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<kbd>' in that specification. |
推荐 | Expanded to include any user input, like voice input and individual keystrokes. |
|
HTML 4.01 Specification
The definition of '<kbd>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
kbd
|
Chrome 完整支持 Yes | Edge 完整支持 12 |
Firefox
完整支持
1
注意事项
|
IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
见实现注意事项。