When using Google to search, it is possible to use the keyboard ↑ / ↓ keys to tab through each search result. Can this feature be added to the home and questions pages?
I think this will increase user experience for users who prefer using the keyboard to mouse control (such as me). I find using the keyboard for basic navigation, in some cases, to be faster than moving my hand to my mouse, moving my mouse and clicking the appropriate link. Using the built-in shortcuts of my OS and the websites I frequent, I can achieve the same task as a co-worker quicker than they.
By using the up/down keys to immediately select the questions it would mean I (and others like me) could keep our hands on the keyboard instead of moving to the secondary input device.
I am aware that it is possible to tab to the questions, but that takes 19 tabs to get to question 1.
As a proof of concept, here is a user.js file:
// ==UserScript==
// @name StackOverflow Keyboard up/down Control
// @namespace [email protected]
// @description Allow user to tab through questions using the up/down keys of their keyboard.
// @include https://stackoverflow.com/*
// ==/UserScript==
// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}
// the guts of this userscript
function main() {
var currentQuestionIndex = -1,
$questions = jQuery('.question-summary .question-hyperlink'),
questionLength = $questions.length -1;
jQuery('body')
//on down/up press, select the next/previous (respectively) question
.on('keydown', function(e){
currentQuestionIndex += (e.which == 38 ? -1 /*up*/ : e.which == 40 /*down*/ ? 1 : 0);
if(currentQuestionIndex < 0) { currentQuestionIndex = 0; }
if(currentQuestionIndex > questionLength) { currentQuestionIndex = questionLength; }
$questions.removeClass('highlight').eq(currentQuestionIndex).addClass('highlight');
})
//when pressing 'enter' on highlighted link, click it.
.on('keydown', function(e) {
//enter key
if(e.which == 13) {
$questions.filter('.highlight')[0].click();
}
})
//Add a red box around currently selected links
.append('<style>.highlight { border:1px solid red; box-sizing: content-box;} </style>');
}
// load jQuery and execute the main function
addJQuery(main);
J
andK
are intuitive to me. They are used in loads of short-cut configurations, and have their origin in VI.