HTML DOM TouchEvent shiftKey Property

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

Following is the syntax −

Returning boolean value - true/false

touchEvent.shiftKey

Here, “booleanValue” can be the following −

booleanValue	Details
true	It definesthat shift key was pressed when touch event occurred
false	It definesthat shift key was not 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 shiftKey property −

Example

<!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">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.shiftKey){
         formSelect.style.backgroundColor = '#4CAF50';
         formSelect.style.color = '#FFF'
         divDisplay.textContent = 'Shift Key Pressed';
      }
   }
</script>
</body>
</html>

Output

Before triggering touch event −

HTML DOM TouchEvent shiftKey Property

After triggering touch event with alt key pressed −

HTML DOM TouchEvent shiftKey Property