Create a shortcut key to activate an element in HTML

Front End Technology HTML Web Development

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.

Yaswanth Varma

Updated on: 02-Sep-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started