Keyboard Shortcut in HTML

Ankur Mishra
5y
46.7k
0
1

Blog

Keyboard Shortcut in HTML

For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various operations, such as clicking a link or button. We can use the accesskey attribute when defining the element to provide the keyboard shortcut to that element of control. Let's create a Web Page, named "accesskey.html" and understand ‘How to create a keyboard shortcut.

First We will Write a Code for ‘accesskey.html :

<!DOCTYPE HTML>
<html>
<head>
<title>Key Board Shortcut</title>
</head>
<body>
<h1>
Use the Shortcut keys to access the Content
</h1>
<p>
Press the
<kbd>Alt + W</kbd> keys to navigate the following link :
</p>
<a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>
<p>
Press the
<kbd>ALT + Z </kbd>keys to focus on the following text field
</p>
Enter Your Name :
<input type="text" name="name" accesskey="z">
<p>
Press the
<kbd>ALT+S</kbd> keys to click the button to submit the form:
</p>
<input type="submit" accesskey="s" onclick="alert('Form submitted successfully.')">
</body>
</html>

Here we have used a hyperlink, a text field and a button on the web page and assigned a keyboard shortcut using the accesskey attribute. The output of the above code is given below :

Now When we press ALT + * Key :

ALT + W: The focus goes on the hyperlink and we get redirected to the page specified by the hyperlink (XYZ.html)
ALT+Z: When we press ALT+Z key then get a focus on the Enter your Name text field.
ALT+S: This focuses on Submit button and give an alert box :