KeyboardEvent: thuộc tính key

Giá trị

Một chuỗi.

Giá trị của nó được xác định như sau:

• Nếu phím được nhấn có biểu diễn in được, giá trị trả về là một chuỗi Unicode không rỗng chứa biểu diễn có thể in của phím. Ví dụ: nếu phím được nhấn là phím Space, giá trị trả về là một khoảng trắng (" "). Nếu phím được nhấn là phím B, giá trị trả về là chuỗi "b". Tuy nhiên, nếu phím Shift được nhấn cùng lúc (nên shiftKey là true), giá trị trả về là chuỗi "B".
• Nếu phím được nhấn là phím điều khiển hoặc phím đặc biệt, giá trị trả về là một trong các giá trị phím được xác định trước.
• Nếu KeyboardEvent biểu diễn việc nhấn một phím chết, giá trị phím phải là "Dead".
• Một số phím bàn phím chuyên biệt (chẳng hạn như các phím mở rộng để điều khiển phương tiện trên bàn phím đa phương tiện) không tạo mã phím trên Windows; thay vào đó, chúng kích hoạt các sự kiện WM_APPCOMMAND. Các sự kiện này được ánh xạ thành các sự kiện bàn phím DOM và được liệt kê trong "Mã phím ảo" cho Windows, mặc dù chúng không thực sự là mã phím.
• Nếu không thể xác định phím, giá trị trả về là Unidentified.

Chuỗi KeyboardEvent

Mỗi KeyboardEvent được kích hoạt theo một chuỗi được xác định trước. Đối với một lần nhấn phím, chuỗi các KeyboardEvent được kích hoạt như sau với giả định rằng Event.preventDefault không được gọi:

1. Sự kiện keydown được kích hoạt đầu tiên. Nếu phím được giữ thêm và phím tạo ra một ký tự, thì sự kiện tiếp tục được phát ra theo khoảng thời gian phụ thuộc vào nền tảng và thuộc tính chỉ đọc KeyboardEvent.repeat được đặt thành true.
2. Nếu phím tạo ra một ký tự có thể dẫn đến ký tự được chèn vào <input>, <textarea> hoặc một phần tử có HTMLElement.contentEditable đặt thành true, các loại sự kiện beforeinput và input được kích hoạt theo thứ tự đó. Lưu ý rằng một số triển khai khác có thể kích hoạt sự kiện unsupported templ: domxref("element/keypress_event", "keypress")} nếu được hỗ trợ. các sự kiện sẽ được kích hoạt lặp lại trong khi phím được giữ. 3. sự kiện {{ được kích hoạt khi phím được nhả. Điều này hoàn tất quá trình.

Trong chuỗi 1 và 3, thuộc tính KeyboardEvent.key được xác định và được đặt thích hợp theo các quy tắc đã định nghĩa ở trên.

Ví dụ về chuỗi KeyboardEvent

Xem xét chuỗi sự kiện được tạo ra khi chúng ta tương tác với phím Shift và phím 2 sử dụng bố cục bàn phím Mỹ so với khi sử dụng bố cục bàn phím Anh.

Hãy thử nghiệm với hai trường hợp sau:

1. Nhấn và giữ phím Shift, sau đó nhấn 2 và nhả ra. Cuối cùng, nhả phím Shift.
2. Nhấn và giữ phím Shift, sau đó nhấn và giữ 2. Nhả phím Shift. Cuối cùng, nhả 2.

HTML

<div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-reset" id="btn-reset">Reset</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>

CSS

.fx {
  -webkit-display: flex;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.fx > div {
  padding-left: 20px;
  padding-right: 20px;
}

.fx > div:first-child {
  width: 30%;
}

.flex {
  -webkit-flex: 1;
  flex: 1;
}

#test-target {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

JavaScript

const textarea = document.getElementById("test-target");
const consoleLog = document.getElementById("console-log");
const btnReset = document.getElementById("btn-reset");

function logMessage(message) {
  consoleLog.innerText += `${message}\n`;
}

textarea.addEventListener("keydown", (e) => {
  if (!e.repeat) {
    logMessage(`Phím "${e.key}" đã nhấn [sự kiện: keydown]`);
  } else {
    logMessage(`Phím "${e.key}" đang lặp [sự kiện: keydown]`);
  }
});

textarea.addEventListener("beforeinput", (e) => {
  logMessage(`Phím "${e.data}" sắp được nhập [sự kiện: beforeinput]`);
});

textarea.addEventListener("input", (e) => {
  logMessage(`Phím "${e.data}" đã nhập [sự kiện: input]`);
});

textarea.addEventListener("keyup", (e) => {
  logMessage(`Phím "${e.key}" đã nhả [sự kiện: keyup]`);
});

btnReset.addEventListener("click", (e) => {
  let child = consoleLog.firstChild;
  while (child) {
    consoleLog.removeChild(child);
    child = consoleLog.firstChild;
  }
  textarea.value = "";
});

Kết quả

Trường hợp 1

Khi phím shift được nhấn, sự kiện unsupported templ: domxref("element/keydown_event", "keydown")} được kích hoạt đầu tiên, và giá trị thuộc tính `key` được đặt thành chuỗi `shift`. khi chúng ta tiếp tục giữ phím này, sự kiện {{domxref("element/keydown_event", "keydown")} không tiếp tục được kích hoạt lặp lại vì nó không tạo ra phím ký tự. khi `phím 2` được nhấn, một sự kiện {{domxref("element/keydown_event", "keydown")} khác được kích hoạt cho lần nhấn phím mới này, và giá trị thuộc tính `key` cho sự kiện được đặt thành chuỗi `@` cho loại bàn phím mỹ và `"` cho loại bàn phím anh, do phím bổ trợ `shift` đang hoạt động. các sự kiện {{ và input được kích hoạt tiếp theo vì một phím ký tự đã được tạo ra.

Khi chúng ta nhả phím 2, một sự kiện