Arrow Navigation, Javascript
My friend starfake asked to post his post. Recently he left one careless comment, for which he was severely punished by the community :) If you like the post or even find it useful, please raise his karma.
Once upon a time, after reading a post about navigation with arrows in Lebedev Technogret, I decided to do the same on the forum of one of my own (with another) project.
No sooner said than done. Arrow navigation worked, which I was very happy about, but after a while a small bug came up. Being on the text field, editing the record, instead of switching with Ctrl between words, you get the transition to the next or previous page (and deleting the record). I was scammed a couple of times, and the script was removed.
Recently, I had nothing to do at work and I decided to rewrite it, given the focus on the form. For speeding up, wrote using jQuery. Unfortunately, I do not know jQuery very well, so I will be grateful for comments and suggestions for improvement (you can certainly make it more beautiful). It differs from the original Lebedev version only: by the presence of the focusStatus variable (the presence of which is checked by pressing Ctrl), focusedElement (just in case). It turns out, unfortunately, that in JS it is impossible (? Seemingly) to find out what focus is on. Therefore, 2 functions focus () and blur () were added on the elements that are important in my opinion - the text field, and inputs (text and password). The focus is on the value of variable 1, on blur () null.
Arrow navigation is only possible when the focusStatus variable is not.
By the way, you can also enter such a thing on Habré, because navigation works when you are on the search field.
Upd. Unfortunately, indentation flies here in the code, so I put the code still here .
Upd # 2 The implementation and plugin from maxic used here .
Upd # 3 Option without jQuery from seraph
Once upon a time, after reading a post about navigation with arrows in Lebedev Technogret, I decided to do the same on the forum of one of my own (with another) project.
No sooner said than done. Arrow navigation worked, which I was very happy about, but after a while a small bug came up. Being on the text field, editing the record, instead of switching with Ctrl between words, you get the transition to the next or previous page (and deleting the record). I was scammed a couple of times, and the script was removed.
Recently, I had nothing to do at work and I decided to rewrite it, given the focus on the form. For speeding up, wrote using jQuery. Unfortunately, I do not know jQuery very well, so I will be grateful for comments and suggestions for improvement (you can certainly make it more beautiful). It differs from the original Lebedev version only: by the presence of the focusStatus variable (the presence of which is checked by pressing Ctrl), focusedElement (just in case). It turns out, unfortunately, that in JS it is impossible (? Seemingly) to find out what focus is on. Therefore, 2 functions focus () and blur () were added on the elements that are important in my opinion - the text field, and inputs (text and password). The focus is on the value of variable 1, on blur () null.
var focusStatus = null;
var focusedElement = null;
$(document).ready(function() {
$("textarea, input[type*='text'], input[type*='password']").focus(function() {
focusStatus = 1;
focusedElement = this.id;
$("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); // Для теста выводил текст в див
});
$("textarea, input[type*='text'], input[type*='password']").blur(function() {
focusStatus = null;
focusedElement = null;
$("#text").text("focusStatus = " + focusStatus + ", focusedElement = " + focusedElement + "\n"); // Для теста выводил текст в див
});
$(document).keydown(function(event) {
if (event.ctrlKey && !focusStatus) {
var link = null;
var href = null;
switch (event.keyCode? event.keyCode: event.which? event.which: null) {
case 0x25:
link = $("#prev").attr("href");
break;
case 0x27:
link = $("#next").attr("href");
break;
}
if (link) document.location = link;
}
});
});
Arrow navigation is only possible when the focusStatus variable is not.
By the way, you can also enter such a thing on Habré, because navigation works when you are on the search field.
Upd. Unfortunately, indentation flies here in the code, so I put the code still here .
Upd # 2 The implementation and plugin from maxic used here .
Upd # 3 Option without jQuery from seraph