HTML 5

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
Membership not found