HTML DOM TouchEvent altKey Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM TouchEvent altKey property returns a Boolean value corresponding to the state if alt key was pressed when a touch event was fired.

Following is the syntax −

Returning boolean value - true/false

touchEvent.altKey

Here, “booleanValue” can be the following −

booleanValue
Details
true
It defines that alt key waspressed when touch event occurred
false
It defines that alt key wasnot pressed when touch event occurred

Note: We ran Touch event examples on Online HTML Editors accessed on Mobile or systems with touch access. This is done so that we can perform touch operations like touch the screen for 2 seconds.

Let us see an example of TouchEvent altKey property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent altKey</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-altKey</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.altKey){
         formSelect.style.backgroundColor = '#FF8A00';
         formSelect.style.color = '#FFF'
         divDisplay.textContent = 'Alt Key Pressed';
      }
   }
</script>
</body>
</html>

Output

Before triggering touch event −

After triggering touch event with alt key pressed −

raja
Updated on 29-Oct-2019 10:01:46

Advertisements