<kbd> HTML-Tastatureingabeelement

Probieren Sie es aus

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

Andere Elemente können zusammen mit <kbd> verwendet werden, um spezifischere Szenarien darzustellen:

• Das Verschachteln eines <kbd>-Elements in einem anderen <kbd>-Element stellt eine tatsächliche Taste oder andere Eingabeeinheit als Teil einer größeren Eingabe dar. Siehe Darstellung von Tastendrücken innerhalb einer Eingabe unten.
• Ein <kbd>-Element innerhalb eines <samp>-Elements darstellt eine Eingabe, die vom System an den Benutzer zurückgegeben wurde. Siehe Zurückgegebene Eingaben, unten, für ein Beispiel.
• Ein <samp>-Element innerhalb eines <kbd>-Elements stellt Eingaben dar, die auf Text basieren, der vom System präsentiert wird, wie die Namen von Menüs und Menüpunkten oder die Namen von Bildschirmtasten. Siehe das Beispiel unter Darstellung von Bildschirm-Eingabeoptionen unten.

Beispiele

Einfaches Beispiel

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

Ergebnis

Darstellung von Tastendrücken innerhalb einer Eingabe

Um eine Eingabe zu beschreiben, die aus mehreren Tastendrücken besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die gesamte Eingabe darstellt und jeder einzelne Tastendruck oder Komponenten der Eingabe in einem eigenen <kbd>-Element eingeschlossen ist.

Ungestyled

Zuerst schauen wir uns an, wie das als einfaches HTML aussieht.

HTML

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

Dies umschließt die gesamte Tastenfolge in einem äußeren <kbd>-Element, dann jede einzelne Taste in ihrem eigenen, um die Komponenten der Sequenz zu kennzeichnen.

Ergebnis

Die Ausgabe sieht so aus, ohne dass ein Stylesheet angewendet wurde:

Mit benutzerdefinierten Stilen

Wir können dies verständlicher machen, indem wir etwas CSS hinzufügen:

CSS

Wir fügen einen neuen Selektor für verschachtelte <kbd>-Elemente hinzu, kbd>kbd, den wir beim Rendern von Keyboardtasten anwenden können:

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

HTML

Dann aktualisieren wir das HTML, um diese Klasse auf die Tasten im auszugebenden Inhalt anzuwenden:

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

Ergebnis

Das Ergebnis ist genau das, was wir wollen!

Zurückgegebene Eingaben

Ein <kbd>-Element innerhalb eines <samp>-Elements darstellt eine Eingabe, die vom System an den Benutzer zurückgegeben wurde.

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

Ergebnis

Darstellung von Bildschirm-Eingabeoptionen

Ein <samp>-Element innerhalb eines <kbd>-Elements stellt Eingaben dar, die auf Text basieren, der vom System präsentiert wird, wie die Namen von Menüs und Menüpunkten oder die Namen von Bildschirmtasten.

Zum Beispiel können Sie erklären, wie die Option "Neues Dokument" im Menü "Datei" ausgewählt wird, indem Sie HTML verwenden, das folgendermaßen aussieht:

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

Dies umfasst einige interessante Verschachtelungen. Für die Menüoption Beschreibung wird die gesamte Eingabe in einem <kbd>-Element eingeschlossen. Dann sind innerhalb dieses Elements sowohl die Menünamen als auch die Menüpunktnamen in <kbd> und <samp> enthalten, wodurch eine Eingabe angezeigt wird, die aus einem Bildschirm-Widget ausgewählt wird.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <code>