Accessible JavaScript onchange select menu
Selectboxes that react immediatly when a selection is done, is more userfriendly when using the mouse (reacting imideately instead of forcing the user to click on a “Go” button), but unaccessible when only using the keyboard, with for example the IE browser (see OnChange Event Accessibility Issues.)
This is a solution, suggested by Thomas Frank. It redefines the event handlers of the select box.
[Read more after the jump.
Here is a live example. It’s appreciated if you test it and report any problems or anomalies either here as a comments or to tommy@heltenkelt.se.
<script type="text/javascript">
/*
Nice select
A select list that works without a submit button for also for keyboard users.
Works like this:
- If a select is clicked then we assume that the user is using a mouse and don't wait for enter.
- Else we assume that the user is not using a mouse and wait for enter to get pressed…
(c)2006 Thomas Frank, Studentlitteratur
*/
niceSelect=function(){
var f=document.forms;
for (var i=0;i<f.length;i++){ // Walks all the forms in the document.
var e=f[i].elements;
for(var j=0;j<e.length;j++){ // Walks all the elements in the form.
if(e[j].type=="select-one"){ // Chooses elements that are select
// box (that does not allow multiple
// selections).
e[j].formnu=i;
// Here comes the "trick" of this
// script: it redefines the
// event handlers of the element.
e[j].onclick=function(){ // If the selection is made
// with the mouse, the it
// behaves like a normal selectbox
// menu and submits).
this.onchange=function(){
f[this.formnu].submit()
}
};
e[j].onblur=function(){ // This "disarms" the onblur function
// so that it will not submit as soon
// as the default option is deselected
// (by moving down the select list with
// the arrow key).
this.onchange=function(){return true}
};
e[j].onkeydown=function(e){ // When keys are pressed on the keyboard…
if (e){theEvent = e} else {theEvent=event};
if (theEvent.keyCode==13){ // ...only submit when 'enter' is pressed.
if((this.onchange+"").indexOf("submit")<0){
f[this.formnu].submit()
}
}
}
}
}
}
}
</script>
This script can then be used by forms like this:
<body onLoad="niceSelect()">
<p>Test form for <a href="http://www.anvandbart.se/node/1105">Accessible JavaScript onchange select menu</a></p>
<form name="testform1" action="javascript:alert('Selected: '+document.forms0.selectbox.selectedIndex)">
<select name="selectbox">
<option value="0">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</body>
(In order to make the solution accessible also for users without javascript, the javascript call needs to be moved from the action attribute to a onsubmit event handler, and a <noscript><input type=“submit”></noscript> should be added. But right now I’m only interested in if this approach will work with all kinds of browsers.)
Other takes at the same problem
- An accessible onchange select menu
- Son of Suckerfish Dropdowns A CSS-based solution.
Kommentarer
Det fungerar inte så bra i Safari. Första gången man gör ett val händer inget. Efterföljande gånger visas en dialogruta. Om man använder tangentbordet är det svårt att stänga dialogrutan eftersom den dyker upp igen om man håller nere returtangenten för länge. Samma tangentbordsproblem uppträder i Opera (9.0, Mac OS X).
Mycket riktigt måste ett nocript-alternativ finnas för att detta ska kunna anses tillgängligt. Men jag är inte övertygad om att det är användbart :-).
Roger Johansson | 23 May 2006
Some comments to this can be found at the Accessify Forum
Tommy | 24 May 2006
I have a close friend ;-) who just installed MacOSX on his laptop, so I guess I have to check it out in Safari a bit more then.
/Thomas
Thomas Frank | 29 May 2006
Post new comment