Create a shortcut key to activate an element in HTML

We can design a keyboard shortcut to carry out certain actions, such clicking a link or button, for Displaying the Keyboard text. When defining the element, we may utilise the accesskey attribute to specify a keyboard shortcut for that control element.

This attribute must contain at least one printable character, including the accented/other characters that can be inputted using a keyboard.

However, different browsers use different ways to activate the accesskey on its platform −

Windows Linux
INTERNET EXPLORER 
Alt + key
Alt + Shift + key
N/A
MOZILLA FIREFOX 
Alt + Shift + key

Alt + Shift + key
GOOGLE CHROME 
Alt + key
Alt + Shift + key

Alt + key
MICROSOFT EDGE 
Alt + key
Alt + Shift + key
N/A
OPERA 15+ 
Alt + key

Alt + key
OPERA 12 Shift + Esc opens list of contents accessible by accesskey, then press corresponding key

Example

In the following example we are using the accesskey to add shortcut keys to our elements.

<!DOCTYPE HTML>
<html>
<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="https://www.youtube.com/" accesskey="w" target="">Open Youtube. </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>

On executing the above script, the access key gets triggered and creates a shortcut key as mentioned in the code.

Updated on: 02-Sep-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements