<kbd>: The Keyboard Input element

Try it

<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> có thể được lồng nhau trong nhiều kết hợp khác nhau với phần tử <samp> (Sample Output) để đại diện cho các dạng đầu vào hoặc đầu ra khác nhau dựa trên các gợi ý trực quan.

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

Các phần tử khác có thể được sử dụng kết hợp với <kbd> để đại diện cho các tình huống cụ thể hơn:

• Lồng một phần tử <kbd> trong một phần tử <kbd> khác đại diện cho một phím thực tế hoặc đơn vị đầu vào khác là một phần của đầu vào lớn hơn. Xem Đại diện cho các tổ hợp phím trong một đầu vào bên dưới.
• Lồng một phần tử <kbd> bên trong phần tử <samp> đại diện cho đầu vào đã được phản hồi lại cho người dùng bởi hệ thống. Xem Đầu vào được phản hồi, bên dưới, để có ví dụ.
• Lồng một phần tử <samp> bên trong phần tử <kbd>, mặt khác, đại diện cho đầu vào dựa trên văn bản được trình bày bởi hệ thống, chẳng hạn như tên menu và mục menu, hoặc tên các nút được hiển thị trên màn hình. Xem ví dụ dưới đây về Đại diện cho các tùy chọn đầu vào trên màn hình.

Ví dụ

Ví dụ cơ bản

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

Kết quả

Đại diện cho các tổ hợp phím trong một đầu vào

Để mô tả một đầu vào bao gồm nhiều tổ hợp phím, bạn có thể lồng nhiều phần tử <kbd>, với phần tử <kbd> bên ngoài đại diện cho đầu vào tổng thể và mỗi tổ hợp phím riêng lẻ hoặc thành phần của đầu vào được bao bọc trong phần tử <kbd> riêng của nó.

Không có kiểu dáng

Đầu tiên, hãy xem điều này trông như thế nào chỉ là HTML thuần túy.

HTML

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

Điều này bao bọc toàn bộ chuỗi phím trong một phần tử <kbd> bên ngoài, sau đó mỗi phím riêng lẻ trong phần tử của riêng nó, để biểu thị các thành phần của chuỗi.

Kết quả

Đầu ra trông như thế này mà không có stylesheet được áp dụng:

Với kiểu dáng tùy chỉnh

Chúng ta có thể hiểu rõ hơn điều này bằng cách thêm một số CSS:

CSS

Chúng ta thêm một bộ chọn mới cho các phần tử <kbd> lồng nhau, kbd>kbd, mà chúng ta có thể áp dụng khi hiển thị các phím bàn phím:

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

HTML

Sau đó chúng ta cập nhật HTML để sử dụng lớp này trên các phím trong đầu ra được trình bày:

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

Kết quả

Kết quả chính xác là những gì chúng ta muốn!

Đầu vào được phản hồi

Lồng một phần tử <kbd> bên trong phần tử <samp> đại diện cho đầu vào đã được phản hồi lại cho người dùng bởi hệ thống.

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

Kết quả

Đại diện cho các tùy chọn đầu vào trên màn hình

Lồng một phần tử <samp> bên trong phần tử <kbd> đại diện cho đầu vào dựa trên văn bản được trình bày bởi hệ thống, chẳng hạn như tên menu và mục menu, hoặc tên các nút được hiển thị trên màn hình.

Ví dụ, bạn có thể giải thích cách chọn tùy chọn "New Document" trong menu "File" bằng cách sử dụng HTML trông như thế này:

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

Điều này thực hiện một số lồng nhau thú vị. Để mô tả tùy chọn menu, toàn bộ đầu vào được bao bọc trong một phần tử <kbd>. Sau đó, bên trong đó, cả tên menu và mục menu đều được chứa trong cả <kbd> và <samp>, chỉ ra đầu vào được chọn từ một widget màn hình.

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• <code>