Creating a hotkey for text selection in the search engine input form

Question

Suppose there is a custom search engine on the Google Custom Search Engine . URL . And its code consists only of a script from Google:

<script> (function() { var cx = '008959915961530481423:nigd_brnqzu'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search>

I have a tab in my browser with the page where the script of this search engine is located, and the cursor is in any of the browser input fields, for example, search bar or address bar . It is necessary that when you press, for example, Ctrl + Alt + K in any common browser, the text in the input form of this search engine is highlighted (or if it is not, the cursor would be placed at the beginning of the form).

Example: I have a Wikipedia page open, and my cursor is in the address bar . I press the combination Alt + Shift + F → the cursor is transferred to the Wikipedia search field, highlighting the text if it is there.

Sasha Princess Wikipedia

Just need to enter the form of my search engine, not Wikipedia. In an open HTML page, where this search engine script is located, there will be many elements, but only one text entry form, from this very custom search engine.

SashaPrincess Custom Search

What tried options are not suitable.

Installation of add-ons, add-ons, etc. on the client side. Search engine users do not have to install anything on their part; they only need to press Ctrl + Alt + K in any of the common browsers.
Accesskey attribute In the above code there are no tags input , textarea or other, just a script from Google. accesskey has nowhere to insert.
Ctrl + K and Ctrl + E combinations in browsers. Yes, there are technologies like OpenSearch , but
1. In the Search Bar, users will probably have another search engine open,
2. Installing the search engine in the Search Bar will require extra traffic from the user,
3. To switch between search engines in the Search Bar, the user will need to click on the browser combination of hot keys several times.
Tab Key. On the page with a search engine there will be many elements: Tab will have to be pressed many times, the transition to the input form will not be realized immediately.

What can be done to create shortcuts? The site where the search engine is located is static, technologies other than HTML and JavaScript are apparently not supported.

In Google Chrome v.49, when the address bar focused and when you press Alt+Shift+F focus on custom search does not shift.
@StepanKasyanenko, a solution only for Firefox is better than no solutions at all).

Sasha Chernykh 3.576 9 23 76 · Accepted Answer · 2016-08-29T11:30:04

Look at these solutions. Maybe they will help you.

Option 1

We hang the keydown event handler on the entire document.

JSFiddle example :

 $(document).on("keydown", function($event) { if ($event.altKey && $event.ctrlKey && $event.keyCode == 75) { $('#gsc-i-id1').focus(); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> (function() { var cx = '008959915961530481423:nigd_brnqzu'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> <div> Try press <code>Ctrl+Alt+K</code> when input on focus. <div> <input> <input type="button" value="OK"> </div> </div>

Option 2

It is also possible to do as in Wikipedia , through the installation of accesskey on a user search.

JSFiddle example :

 $(document).ready(function() { function setAccessKey() { if ($('#gsc-i-id1').length === 0) setTimeout(setAccessKey, 500); else $('#gsc-i-id1').attr('accesskey', 'k'); } setTimeout(setAccessKey, 500); // Нужно, потому что поиск от Google может загрузиться позже страницы });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> (function() { var cx = '008959915961530481423:nigd_brnqzu'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> <div> Try press <pre> Internet Explorer: Alt + K Chrome: Alt + K or Shift + Alt + K Opera: Shift + Esc, K Safari: Alt + K Firefox: Shift + Alt + K </pre> when input on focus. <div> <input accesskey="j"> <input type="button" value="OK"> </div> </div>

But if the cursor is in the address bar or search bar browser, then after clicking on the shortcut, the cursor does not move to the search engine input field.
Because when the cursor is in the address bar or search bar , the document loses focus.
And since it loses focus, keyboard events are not processed.
It will also not work if the entire browser is out of focus (not active).
@SachaBlack, it is worth getting out of the browser viewport and JS powerless, for safety engineering.
Expansion could help, there is an appointment of special shortcut keys, but only for chrome (perhaps in other browsers, if there is a similar one) and only after installation.
But, as was said in the question - Installation of add-ons, add-ons, etc., on the client side.
Search engine users do not have to install anything on their part; they only need to press Ctrl + Alt + K in any of the common browsers.
@Other, and it is hardly necessary that the hotkey should function when the browser is out of focus.

Creating a hotkey for text selection in the search engine input form

1 answer 1

Option 1

Option 2

More articles: