Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính khóa HTML DOM KeyboardEvent

Thuộc tính phím KeyboardEvent trả về mã nhận dạng phím tương ứng với phím được nhấn bằng một sự kiện.

Cú pháp

Sau đây là cú pháp -

Trả lại mã định danh của ký tự đã nhập mới nhất -

event.key

Ví dụ

Hãy để chúng tôi xem một ví dụ cho thuộc tính phím KeyboardEvent -

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-key</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.key === 'B')
         divDisplay.textContent = 'Correct Answer';
      else if(InputEvent.key === 'b')
         divDisplay.textContent = 'Close call, you might have caps lock turned off';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhập bất kỳ thứ gì vào trường văn bản -

Thuộc tính khóa HTML DOM KeyboardEvent

Sau khi nhập ‘b’ trong trường văn bản -

Thuộc tính khóa HTML DOM KeyboardEvent

Sau khi nhập ‘B’ trong trường văn bản -

Thuộc tính khóa HTML DOM KeyboardEvent