PHPLego: Hotkeys - hotkey attribute

Dear friends! Today I want to share with you 138 lines of code that allow the <a> links and the <input type = 'submit'> buttons to be expanded with the hotkey attribute.

After all, sometimes you want the form to be sent by CTRL + Enter, and frequently used menu items are available for some of their tricky key combinations.
And I don't want to waste time on these small amenities, because hot keys are far from being for everyone. Although getting used to them is simply impossible to unlearn.
')
Having connected the hotkeys.js file, which will be described below, it is possible to set hotkeys with any links and form submit buttons like this:

<a href='...' hotkey="Ctrl + Shift + D"></a>  <input type='submit' hotkey='Ctrl + Enter' value=''> 

The fact is that it’s not the most convenient way to describe a handler each time a key is pressed when there is a desire to add hot keys to a site. Too much honor, for such a non-global task - because it is not very common. Usually the decisive factor is banal laziness. And the customers themselves will not demand this (until, of course, they find out somewhere that this type is fashionable). Therefore, I propose an option for the lazy - no handlers, except one. And the hotkey becomes self-documented thanks to the text from the link.

These lines, the contents of the hotkeys.js file:

 //  ,  hotkeys.js //    JQuery. :    $(function(){ //     ,    : var keyCodes = {D:68, E:69, F:70, M:77, N:78, O:79, U:85, Esc:27, "/":220, "0":48, "1":49, "2":50, "3":51, "4":52, "5":53, "6":54, "7":55, "8":56, "9":57, Left:37, Up:38, Right:39, Down:40, Enter:13, Ctrl:17, Alt:18, Space:32 //  ,      }; //    (     ) var prompt = $("<div class='hotprompt'>-</div>"); prompt.css("position", "absolute"); prompt.css("padding", "1px 3px"); prompt.css("font-size", "8px"); prompt.css("background-color", "orange"); prompt.css("color", "black"); prompt.css("opacity", "0.8"); //     prompt.css("border", "1px solid black"); //    ,    : prompt.css("border-radius", "7px 7px 0px 7px"); prompt.css("-moz-border-radius", "7px 7px 0px 7px"); //     var showHotPrompts = function(){ if($(".hotprompt").length > 0) return ; //     ,   hotkey $("a[hotkey], input[hotkey]").each(function(a){ p = prompt.clone(); //  ,    p.html($(this).attr("hotkey")); //    "Ctrl + .." p.insertAfter($(this)); //      //   ,         : p.css("left", $(this).position().left - p.width()); p.css("top", $(this).position().top - p.height()); }); } //    var hideHotPrompts = function(){ //    : $("a[hotkey], input[hotkey]").each(function(a){ $(".hotprompt").remove(); }); } //  ,       var in_array = function(needle, haystack){ for (key in haystack) if (haystack[key] == needle) return true; return false; } //      $("html").keydown(function(e){ var lastGood = false; //      ,     hotkey $("a[hotkey], input[hotkey]").each(function(a){ var hotkey = $(this).attr("hotkey"); //   ( Ctrl + E) var words = hotkey.split("+"); //   //      -   : var key = words.pop().replace(/\s/,""); //       var syskeys = new Array(); //       (Ctrl, Alt, Shift) for(var i in words) syskeys.push(words[i].replace(/\s+/g,"")); if(keyCodes[key] != e.keyCode) return; //    -  if(in_array('Ctrl', syskeys) && !e.ctrlKey) return; //Ctrl   -  if(in_array('Alt', syskeys) && !e.altKey) return; //Alt   -  if(in_array('Shift', syskeys) && !e.shiftKey) return;//Shift   -  //     ,    : lastGood = $(this); //      }); //      ( )  : if(lastGood){ //    ,  : if(lastGood.attr("type") == 'submit') $(lastGood.context.form).submit(); else{ //   ,   var href = lastGood.attr("href"); lastGood.click(); } return false; //      } //     : //    CTRL -      if(e.keyCode == keyCodes.Ctrl){ showHotMap(); showHotPrompts(); //  } }); //     -      $("html").keyup(function(e){ if(e.keyCode == keyCodes.Ctrl){ hideHotPrompts(); hideHotMap(); } }); //  -  -       $("html").click(function(e){ hideHotPrompts(); hideHotMap(); }); //     (      ) var showHotMap = function(){ if($(".hotsitemap").length > 0) return ; //    var hotmap = $("<div>"); $("body").append(hotmap); hotmap.addClass("hotsitemap"); hotmap.css('background-color', 'orange'); hotmap.css('position', 'fixed'); //      hotmap.css('color', 'black'); hotmap.css('top', '200px'); //     hotmap.css('padding', '20px'); hotmap.css("border-radius", "10px"); // ,    hotmap.css("-moz-border-radius", "10px");//   hotmap.append("<h3> </h3>"); //          $("a[hotkey]").each(function(){ var hotkey = $(this).attr("hotkey"); var value = $(this).html(); //   <a href=...> </a> var title = $(this).attr("title"); // <a title=' '>... //     ,   (    ) var display_text = value.length > title.length ? value : title; //        : hotmap.append("<b>"+hotkey+"</b> "+display_text+"<br />"); }); } //    var hideHotMap = function(){ $(".hotsitemap").remove(); } }); 

Speaking in Russian, this script by clicking on a key combination runs through all the elements containing the hotkey attribute and, if it finds an element with such a combination, it clicks on it. If there are several elements with such a combination, then it clicks on the last of them.

Also, by pressing the Ctrl key, it displays a pop-up hint on the possibility to use the hot key above each hot element. Also, at the same moment, it displays a block in which all hotkeys of the page are listed in a list.

This block is good because it displays everything, even hidden hotkeys (i.e., the keys on the links that have the display: none style). Thus, it is possible to place on the page a list of hidden links to any sections for which there is no corresponding menu item, and thereby create another shortcut to these sections.

I take this opportunity to contact the creators of browsers.

Dear developers! Please enable these 138 lines of code in the browser itself, is it really that difficult? We promise we will use it. Here Habr's readers will not lie to you. And we thank you so much! Pity us, those who tolerate your differences in standards, intricacies and differences in approaches to javascript and HTML attributes. Above simple programmers and designers, those who respectfully awaits every new CSS attribute and work like slaves in galleys, based on the opportunities that you create in order to create what our customers require. You are standing at the origin of this pyramid, and I hope you realize the importance of the responsibility that lies on your fingertips. We appreciate and respect the work you have done over the years and I hope you will listen to us and our advice.

Dear Habrechiteli, yesterday I said goodbye to my old work, because I wrote articles on Habré. Friends, I count on you. If you care about the future and the development of browsers, if you feel uncomfortable with the situation - act. You can affect the existing unfairly! We read tens of thousands of people from the field of IT. We can and must actively participate in shaping the tags, attributes, parameters and other useful innovations we need. Much has not yet been done, and if we are silent - it is not known how long it will take for them to finally dawned. Therefore, I ask to unsubscribe all those who are in favor of including the hotkey attribute in the clickable elements of HTML.

I AM FOR! Oleg Jozhik