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

Thuộc tính vị trí của HTML DOM KeyboardEvent

Thuộc tính loaction HTML DOM KeyboardEvent trả về số tương ứng với vị trí của phím được nhấn trên bàn phím.

Cú pháp

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

Quay lại vị trí của phím đã nhấn -

event.location

Số

Đây, số trả về có thể như sau -

số
Mô tả
0
Nó đại diện cho hầu hết các giá trị trên bàn phím. (mọi phím ở phần giữa của bàn phím, ví dụ:‘Q’, ’\’, 'phím cách')
1
Nó đại diện cho các giá trị trên bàn phím bên trái. (mọi phím trong phần bên trái của bàn phím, ví dụ:‘left ctrl’, ’left Shift’, ’left alt’)
2
Nó đại diện cho các giá trị trên bàn phím bên phải. (mọi phím trong phần bên phải của bàn phím, ví dụ:'right ctrl', 'right Shift', 'right alt')
3
Nó đại diện cho các giá trị trên bàn phím số. (mọi phím trong phần phím số của bàn phím, ví dụ:‘1’, ’/’, ’.’)

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location</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-location</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="type here..." onkeydown="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.location === 0)
         divDisplay.textContent = 'key Pressed in middle section';
      else if(InputEvent.location === 1)
         divDisplay.textContent = 'key Pressed in left section';
      else if(InputEvent.location === 2)
         divDisplay.textContent = 'key Pressed in right section';
      else
      divDisplay.textContent = 'key Pressed in numpad section';
   }
</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 vị trí của HTML DOM KeyboardEvent

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

Thuộc tính vị trí của HTML DOM KeyboardEvent

Sau khi nhấn ‘+’ trong trường văn bản từ numpad -

Thuộc tính vị trí của HTML DOM KeyboardEvent