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

Thuộc tính metaKey của HTML DOM TouchEvent

Thuộc tính HTML DOM TouchEvent metaKey trả về giá trị Boolean tương ứng với trạng thái nếu meta được nhấn khi một sự kiện chạm được kích hoạt.

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

Trả về giá trị boolean - true / false

touchEvent.metaKey

Đây, “ booleanValue ”Có thể là sau -

booleanValue
Chi tiết
true
Nó xác định rằng khóa meta được nhấn khi xảy ra sự kiện chạm
false
Nó xác định rằng phím meta không được nhấn khi xảy ra sự kiện chạm

Lưu ý:Chúng tôi đã chạy các ví dụ về sự kiện Touch trên Trình chỉnh sửa HTML Trực tuyến được truy cập trên Điện thoại di động hoặc các hệ thống có quyền truy cập cảm ứng. Thao tác này được thực hiện để chúng ta có thể thực hiện các thao tác chạm như chạm vào màn hình trong 2 giây.

Hãy để chúng tôi xem một ví dụ về thuộc tính TouchEvent metaKey -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent metaKey</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-metaKey</legend>
         <label for="textSelect">Background Color Changer</label>
         <div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
         <div id="divDisplay">No HotKey Pressed</div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var formSelect = document.getElementById("formSelect");
   function eventAction(event) {
      if(event.metaKey){
         formSelect.style.backgroundColor = '#03A9F4';
         formSelect.style.color = '#FFF'
         divDisplay.textContent = 'meta Key Pressed';
      }
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính metaKey của HTML DOM TouchEvent

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

Thuộc tính metaKey của HTML DOM TouchEvent