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 :
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Key Board Shortcut</title>
  5. </head>
  6. <body>
  7. <h1>
  8. Use the Shortcut keys to access the Content
  9. </h1>
  10. <p>
  11. Press the
  12. <kbd>Alt + W</kbd> keys to navigate the following link :
  13. </p>
  14. <a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>
  15. <p>
  16. Press the
  17. <kbd>ALT + Z </kbd>keys to focus on the following text field
  18. </p>
  19. Enter Your Name :
  20. <input type="text" name="name" accesskey="z">
  21. <p>
  22. Press the
  23. <kbd>ALT+S</kbd> keys to click the button to submit the form:
  24. </p>
  25. <input type="submit" accesskey="s" onclick="alert('Form submitted successfully.')">
  26. </body>
  27. </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 :
Image-1.jpg

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 :
    Image-2.jpg