Keyboard Shortcut in HTML

Keyboard shortcut in HTML.

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