By | July 29, 2013
     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 :
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  :




Leave a Reply

Your email address will not be published. Required fields are marked *