Question

I have a big page, with full of (server side) generated information organized into “chapters”. To allow an easier overview for the user I put a little element with CSS fixed position to the top right corner of the page.

<div class="selector">Goto section within the table:&nbsp;<select
id="chapterselector"
onChange="goto_section('chapterselector')">%SELECTOR%</select>
</div>

The text “%SELECTOR%” is replaced by the server side component to the correct option elements.

function goto_section ( element ) {
    element = document.getElementById(element);
    window.location = '#Chapter_' + element.value;
}

This is the JavaScript part for now. This works nicely. However one little issue remains:

Users (including me) can use the select menu to jump inside the document, but then often cursor arrow keys would be used to navigate to scroll the page. The problem: after using the select menu, it has the focus, so cursor keys now “scrolls” the possible choices inside the select menu. What I want: after using the select menu, I want it to lose the focus automatically, so cursor keys scrolls the page.

How can I do this? Thanks for any suggestion.

Answer 1

element.blur()

try that after setting the location