My friend
starfake asked him to post his post. Recently, he left one reckless comment, for which he was severely punished by the community :) If you like the post or even will be useful, please raise his karma.
Once upon a time, after reading a
post about navigation using
the arrows in Lebedev's technogrette, I decided to do the same on the forum of one of my (with a friend) project.
No sooner said than done. Navigation with arrows has earned, to which I was very happy, but after a while a small bug emerged. Being on a text field, editing a record, instead of moving with Ctrl between words, you get a transition to the next or previous page (and deleting the record). I got 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.
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;
}
});
});
For acceleration written using jQuery. Unfortunately, jQuery is not well known, 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:
the presence of the focusStatus variable (which we check for when pressing Ctrl), focusedElement (stayed just in case).
It turns out, unfortunately, in JS you cannot (seemingly) know what the focus stands on. Therefore, we added 2 functions focus () and blur () on the important elements in my opinion - the text field, and inputs (text and password). The focus is set to variable 1, to blur () null.
Arrow navigation is carried out only when there is no focusStatus variable.
On Habré, by the way, you can also enter such a thing, 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 Implementation and
plugin from
maxic , used
here .
Upd # 3 Option without jQuery from
seraph