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

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

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

Cú pháp

touchEvent.ctrlKey

Giá trị "booleanValue" có thể là:

booleanValue Chi tiết
true Định nghĩa phím Ctrl đã được nhấn khi sự kiện chạm xảy ra
false Định nghĩa phím Ctrl 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 ctrlKey:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM TouchEvent ctrlKey</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-ctrlKey</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.ctrlKey) {
        formSelect.style.backgroundColor = '#F44336';
        formSelect.style.color = '#FFF';
        divDisplay.textContent = 'Phím Ctrl đượ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 ctrlKey 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 ctrlKey của TouchEvent trong HTML DOM