<kbd>: Das Keyboard Input-Element

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

<kbd> kann in verschiedenen Kombinationen mit dem <samp> (Sample Output) Element verschachtelt werden, um verschiedene Formen der Eingabe oder Ausgabe basierend auf visuellen Hinweisen darzustellen.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

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

• Das Verschachteln eines <kbd>-Elements innerhalb eines anderen <kbd>-Elements stellt eine tatsächliche Taste oder eine andere Eingabeeinheit als Teil einer größeren Eingabe dar. Siehe Darstellung von Tastenanschlägen innerhalb einer Eingabe unten.
• Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt Eingaben dar, die vom System an den Benutzer zurückgegeben wurden. Siehe Wiedergespiegelte Eingabe unten für ein Beispiel.
• Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements stellt hingegen Eingaben dar, die auf vom System angezeigtem Text basieren, wie die Namen von Menüs und Menüeinträgen oder die Namen von Bildschirmschaltflächen. Siehe das Beispiel unter Darstellung von Bildschirm-Eingabemöglichkeiten 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 Tastenanschlägen innerhalb einer Eingabe

Um eine Eingabe zu beschreiben, die aus mehreren Tastenanschlägen besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die Gesamteingabe und jeder einzelne Tastenanschlag oder Bestandteile der Eingabe in seinem eigenen <kbd> eingeschlossen wird.

Unformatiert

Zuerst schauen wir, wie das in reinem 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 Tastensequenz in einem äußeren <kbd>-Element und dann jede einzelne Taste in ihrem eigenen, um die Komponenten der Sequenz darzustellen.

Ergebnis

Ohne angewendetes Stylesheet sieht die Ausgabe so aus:

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 Tastenschlüsseln 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 Bereich zu verwenden:

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

Wiedergespiegelte Eingabe

Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt Eingaben dar, die vom System an den Benutzer zurückgegeben wurden.

<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-Eingabemöglichkeiten

Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements stellt Eingaben dar, die auf vom System angezeigtem Text basieren, wie die Namen von Menüs und Menüeinträgen oder die Namen von Bildschirmschaltflächen.

Zum Beispiel können Sie erklären, wie man die "Neues Dokument"-Option im "Datei"-Menü wählt, indem Sie HTML verwenden, das so 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 verwendet interessante Verschachtelungen. Für die Menüoption Beschreibung ist die gesamte Eingabe in einem <kbd>-Element eingeschlossen. Dann, darin, sind sowohl die Menü- als auch die Menüelementnamen sowohl in <kbd> als auch <samp> enthalten, was eine aus einem Bildschirm-Widget ausgewählte Eingabe anzeigt.

Ergebnis

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <code>