Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM TouchEvent altKey Property
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
<!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 −
Updated on: 29-Oct-2019
31 Views
Advertisements