<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: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

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

Attribute

Dieses Element umfasst nur die globalen Attribute.

Verwendungshinweise

Andere Elemente können in Kombination 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 Tastenkombinationen innerhalb einer Eingabe darstellen weiter unten.
• Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt eine Eingabe dar, die dem Benutzer vom System zurückgegeben wurde. Siehe Zurückgegebene Eingabe weiter unten für ein Beispiel.
• Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements hingegen stellt eine Eingabe dar, die auf dem Text basiert, den das System zeigt, wie z.B. die Namen von Menüs und Menüelementen oder die Namen von auf dem Bildschirm angezeigten Schaltflächen. Siehe das Beispiel unter Darstellung von Bildschirm-Eingabeoptionen weiter unten.

Beispiele

Einfaches Beispiel

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

Ergebnis

Tastenkombinationen innerhalb einer Eingabe darstellen

Um eine Eingabe zu beschreiben, die aus mehreren Tastenkombinationen besteht, können Sie mehrere <kbd>-Elemente verschachteln, wobei ein äußeres <kbd>-Element die gesamte Eingabe repräsentiert und jeder einzelne Tastendruck oder Bestandteil der Eingabe in seinem eigenen <kbd> eingeschlossen ist.

Unformatiert

Lassen Sie uns zuerst ansehen, wie dies 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 Tastenabfolge in einem äußeren <kbd>-Element und dann jede einzelne Taste in ihrem eigenen, um die Bestandteile der Abfolge zu kennzeichnen.

Ergebnis

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

Mit benutzerdefinierten Stilen

Wir können mehr Klarheit schaffen, indem wir etwas CSS hinzufügen:

CSS

Wir fügen einen neuen Selektor für verschachtelte <kbd>-Elemente hinzu, kbd>kbd, den wir anwenden können, wenn wir Tasten auf der Tastatur darstellen:

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

HTML

Dann aktualisieren wir das HTML, um diese Klasse auf die im Output dargestellten Tasten 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 Eingabe

Das Verschachteln eines <kbd>-Elements innerhalb eines <samp>-Elements stellt eine Eingabe dar, die dem Benutzer vom System 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

Das Verschachteln eines <samp>-Elements innerhalb eines <kbd>-Elements stellt eine Eingabe dar, die auf dem Text basiert, den das System zeigt, wie z.B. die Namen von Menüs und Menüelementen oder die Namen von auf dem Bildschirm angezeigten Schaltflächen.

Zum Beispiel können Sie erklären, wie man im "Datei"-Menü die Option "Neues Dokument" wählt, indem Sie ein 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 beinhaltet einige interessante Verschachtelungen. Für die Menüoptionbeschreibung wird die gesamte Eingabe in ein <kbd>-Element eingeschlossen. Dann sind die Menü- und Menüpunktnamen sowohl in <kbd> als auch in <samp> enthalten, was eine Eingabe anzeigt, die von einem Bildschirm-Widget ausgewählt wird.

Ergebnis

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <code>