3

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);
6
  • 4
    stackoverflow.com/users/preferences/current => "Enable keyboard shortcuts"
    – Cody Gray Mod
    Commented Jun 19, 2017 at 11:29
  • 2
  • Wow. That's not intuitive at all. Then again, what shortcut is? Is it possible to change the keyboard shortcuts? Commented Jun 19, 2017 at 11:35
  • No settings for changing the built-in keyboard shortcuts, no. But you could disable the built-in stuff and install a customized version of the inspirational extension. Also, not intuitive? You mean you don't immediately open the settings/profile page for any new thing that you join to see what all exists?!?
    – Cody Gray Mod
    Commented Jun 19, 2017 at 11:37
  • 2
    @RichardParnaby-King: J and K are intuitive to me. They are used in loads of short-cut configurations, and have their origin in VI.
    – Martijn Pieters Mod
    Commented Jun 19, 2017 at 12:13
  • 1
    @Martijn these days it's probably all about the A/W/S/D :p
    – Jon Clements Mod
    Commented Jun 19, 2017 at 12:44

2 Answers 2

4

Short answer:

Keyboard shortcuts already exist:

stackoverflow.com/users/preferences/current => "Enable keyboard shortcuts" – Cody Gray

And we can't change the default shortcuts:

No settings for changing the built-in keyboard shortcuts, no. [snip] – Cody Gray

Slightly longer answer:

Rolled my own:

Here is a user.js script that allows the user to go up/down the list of questions and press enter "click" the link.

Originally I tried to extend the StackExchange.keyboardShortcuts function to trigger on the up/down keys, then to trigger keydown (e.which=74 / 75) but couldn't find the element that this event was bound to.

// ==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.9.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'),
    questionLength = $questions.length - 1;


  jQuery('body')

    //on down/up press, select the next/previous (respectively) question
    .on('keydown', function(e) {
      if (e.which == 38 || e.which == 40) {
        currentQuestionIndex += (e.which == 38 ? -1 /*up*/ : e.which == 40 /*down*/ ? 1 : 0);
        if (currentQuestionIndex < 0) {
          currentQuestionIndex = 0;
        }
        if (currentQuestionIndex > questionLength) {
          currentQuestionIndex = questionLength;
        }

        $questions.removeClass('keyboard-selected').eq(currentQuestionIndex).addClass('keyboard-selected');
      }
    })

    //when pressing 'enter' on highlighted link, click it.
    .on('keydown', function(e) {
      //enter key
      if (e.which == 13) {
        $questions.filter('.keyboard-selected').find('.question-hyperlink')[0].click();
      }
    });
}

// load jQuery and execute the main function
addJQuery(main);

0

There is no reason to reinvent the wheel.There is already better solution for this problem - vim bindings! It gives you consistent, customised shortcuts for any page on the internet.

I use VimFx on firefox, and surely there are Chrome alternatives.

It takes some time to get used to, but it's totally worth it in the long run. It takes only 2-3 keystrokes to open any link on any page.

3
  • Just don't forget how to exit Vim ;) Commented Jun 20, 2017 at 16:04
  • In vimFx it's as simple as entering i (although this default behavior may be annoying sometimes). In the times of greatest peril, where memory fails, searchable cheat-sheet is available within a click of the button.
    – charlie_pl
    Commented Jun 20, 2017 at 16:29
  • I was being a little cheeky, as well as a passing reference to another meta post related to vim usage, which was itself, being a little cheeky. Commented Jun 20, 2017 at 16:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .