CODEWITHSUNDEEP
google-chrome-extension
ChintsKhorasiya
ChintsKhorasiya

Reputation: 51

On specific key press event in chrome extension

I want to make a google chrome extension, in which there is a simple index.html. On that page when I'll press alt+ctrl+a then mouse focus should be on the first text box.

I'm having difficulties how to implement the code for keyboard shortcuts.

Upvotes: 0

Views: 847

Answers (1)

Jan
Jan

Reputation: 883

You might want to look into the accesskey syntax:

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html#ex

HTH :)

Edit: Right, the page example wasn't really that good so here's a reference implementation.

Basically, what you want to do is add accesskey="f" for C-A-f to call attention to the input field.

Slightly modified example from Wikipedia's basic search form:

<form action="http://en.wikipedia.org/w/index.php" id="searchform">
 <div id="simpleSearch">
  <input type="text" name="search" value="Example text" title="Search Wikipedia [f]" accesskey="f" id="searchInput" />
   <button type="submit" name="button" title="Search Wikipedia for this text" id="searchButton"><img src="foo.png" alt="Search" title="Search" /></button>
<input type='hidden' name="title" value="Special:Search"/>
  </div>
</form>

In this example, pushing C-A-f should bring browser focus to the desired box.

While you're at it, you might want to have a javascript even tied to the form so that if the user sleects the field using the mouse, it'll still automatically have all text selected for easier input.

First, put this in your header (or js file):

function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}

... then add an onClick event to the input field that looke like this: onClick="SelectAll('searchInput');", resulting in this line:

  <input type="text" name="search" value="Example text" title="Search Wikipedia [f]" accesskey="f" id="searchInput" onClick="SelectAll('searchInput');" />

Upvotes: 1

Related Questions