Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính shiftKey của TouchEvent trong HTML DOM

Thuộc tính shiftKey của TouchEvent trong HTML DOM trả về một giá trị Boolean tương ứng với trạng thái phím Shift có được nhấn khi sự kiện chạm (touch event) được kích hoạt hay không.

Cú pháp

touchEvent.shiftKey

"booleanValue" có thể là:

booleanValue Chi tiết
true Định nghĩa phím Shift đã được nhấn khi sự kiện chạm xảy ra
false Định nghĩa phím Shift không được nhấn khi sự kiện chạm xảy ra

Lưu ý: Các ví dụ sự kiện chạm được chạy trên trình soạn thảo HTML trực tuyến được truy cập trên thiết bị di động hoặc hệ thống có hỗ trợ chạm. Điều này cho phép thực hiện các thao tác chạm như chạm màn hình trong 2 giây.

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính TouchEvent shiftKey:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM TouchEvent shiftKey</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    legend { border-color: #dc3545; }
    span { display: inline-block; width: 40px; height: 20px; margin: 1px; color: #fff; border: 3px solid black; }
    div span:nth-child(1) { background-color: #FF8A00; }
    div span:nth-child(2) { background-color: #F44336; }
    div span:nth-child(3) { background-color: #03A9F4; }
    div span:nth-child(4) { background-color: #4CAF50; }
  </style>
</head>
<body>
  <form id="formSelect" ontouchstart="eventAction(event)">
    <fieldset>
      <legend>HTML-DOM-TouchEvent-shiftKey</legend>
      <label for="textSelect">Thay Đổi Màu Nền</label>
      <div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
      <div id="divDisplay">Không Có Phím Tắt Được Nhấn</div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var formSelect = document.getElementById("formSelect");
    function eventAction(event) {
      if (event.shiftKey) {
        formSelect.style.backgroundColor = '#4CAF50';
        formSelect.style.color = '#FFF';
        divDisplay.textContent = 'Phím Shift Được Nhấn';
      }
    }
  </script>
</body>
</html>

Kết quả

Trước khi kích hoạt sự kiện chạm:

Thuộc tính shiftKey của TouchEvent trong HTML DOM

Sau khi kích hoạt sự kiện chạm với phím Alt được nhấn:

Thuộc tính shiftKey của TouchEvent trong HTML DOM