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 or 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 :

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