<kbd>: 鍵盤輸入元素

基線廣泛可用

此功能已經成熟，可以在許多裝置和瀏覽器版本中使用。它自 2015 年 7 月.

<kbd> HTML 元素表示一段內聯文字，表示鍵盤、語音輸入或任何其他文字輸入裝置的文字使用者輸入。按照慣例，使用者代理預設使用其預設的等寬字型呈現 <kbd> 元素的內容，儘管這不是 HTML 標準強制執行的。

嘗試一下

<kbd> 可以與 <samp>（樣本輸出）元素以各種組合巢狀，以表示基於視覺提示的各種輸入或輸出形式。

屬性

此元素僅包含全域性屬性。

使用說明

其他元素可以與 <kbd> 一起使用以表示更具體的場景。

將 <kbd> 元素巢狀在另一個 <kbd> 元素內表示作為較大輸入的一部分的實際鍵或其他輸入單元。請參閱下面的在輸入中表示擊鍵。
將 <kbd> 元素巢狀在 <samp> 元素內表示系統回顯給使用者的輸入。請參閱下面的回顯輸入示例。
另一方面，將 <samp> 元素巢狀在 <kbd> 元素內表示基於系統呈現的文字的輸入，例如選單和選單項的名稱，或螢幕上顯示的按鈕的名稱。請參閱下面表示螢幕上的輸入選項下的示例。

注意：您可以定義自定義樣式以覆蓋瀏覽器對 <kbd> 元素的預設字型選擇，儘管使用者的偏好可能會覆蓋您的 CSS。

示例

基本示例

html

<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>

結果

在輸入中表示擊鍵

要描述由多個擊鍵組成的輸入，您可以巢狀多個 <kbd> 元素，其中外部 <kbd> 元素表示整體輸入，每個單獨的擊鍵或輸入元件都包含在其自己的 <kbd> 內。

未設定樣式

首先，讓我們看看這僅僅作為純 HTML 是什麼樣子。

HTML

html

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

這將整個按鍵序列包裝在外部 <kbd> 元素中，然後將每個單獨的鍵包裝在其自身內，以表示序列的元件。

注意：您無需執行所有這些包裝；您可以選擇透過省略外部 <kbd> 元素來簡化它。換句話說，將其簡化為 <kbd>Ctrl</kbd>+<kbd>N</kbd> 將是完全有效的。

但是，根據您的樣式表，您可能會發現這種巢狀很有用。

結果

沒有應用樣式表時，輸出看起來像這樣

使用自定義樣式

我們可以透過新增一些 CSS 來更清楚地瞭解這一點

CSS

我們為巢狀的 <kbd> 元素添加了一個新的選擇器，kbd>kbd，我們可以在渲染鍵盤鍵時應用它

css

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

然後我們將 HTML 更新為在輸出中使用此類在將要呈現的鍵上

html

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

結果

結果正是我們想要的！

回顯輸入

將 <kbd> 元素巢狀在 <samp> 元素內表示系統回顯給使用者的輸入。

html

<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>

結果

表示螢幕上的輸入選項

將 <samp> 元素巢狀在 <kbd> 元素內表示基於系統呈現的文字的輸入，例如選單和選單項的名稱，或螢幕上顯示的按鈕的名稱。

例如，您可以解釋如何使用看起來像這樣的 HTML 在“檔案”選單中選擇“新建文件”選項

html

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</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>

這做了一些有趣的巢狀。對於選單選項描述，整個輸入都包含在 <kbd> 元素中。然後，在其中，選單和選單項名稱都包含在 <kbd> 和 <samp> 中，表示從螢幕小部件中選擇的輸入。

結果

技術摘要

內容類別	流動內容，短語內容，可感知內容。
允許的內容	短語內容.
標籤省略	無，起始標籤和結束標籤都是必需的。
允許的父級	任何接受短語內容的元素。
隱式 ARIA 角色	沒有相應的角色
允許的 ARIA 角色	任何
DOM 介面	`HTMLElement`

規範

規範
HTML 標準 # the-kbd-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參見

<code>