Matthew Pennell schreef:
On 08/06/07, *Lea de Groot* <[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> wrote:
On Fri, 8 Jun 2007 07:27:46 +0100, Matthew Pennell wrote:
> Auto-submitting dropdowns are not usable by keyboard users.
More information, please? :)
Auto-submit dropdowns mostly work by triggering the onchange event of
the SELECT element. This is fired when you select a different OPTION
using a mouse - however, if you are using a keyboard, it is fired when
you press the down arrow to move through the list. You therefore can't
select anything but the first OPTION, as it triggers the onchange
event and submits the form.
In Firefox you can use your keyboard in such case, but at least IE and
Opera will submit on the first <option>.
I've tried to write a script that offers auto submit, but still enables
keyboard navigation. When a keyboard is used the submit is triggered on
blur. In Opera hitting 'enter' can be used as well to submit as this is
the browsers normal behaviour (in IE and Firefox hitting 'enter' only
submits the form if the focus is on an <input>).
Here it is (autoSubmit() needs to be called on load):
function autoSubmit() {
if (!document.getElementById) return;
var selectNav = document.getElementById('selectNav');
if (!selectNav) return
selectNav.onfocus = function() {
this.origVal = this.value;
}
selectNav.onchange = function() {
if (this.newVal) this.origVal = this.newVal;
this.newVal = this.value;
}
selectNav.onblur = selectNav.onclick = function() {
if (this.newVal && this.newVal != this.origVal) {
this.form.submit();
}
}
}
<form>
<select name="selectNav" id="selectNav">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<form>
I briefly tested it in IE7, Fx2 and Op9, so it may need some tweaking
for other browser. In real life there should (initially) be a submit
button as well of course to grant access for those who have disabled
JavaScript.
Hopefully it is usefull to someone.
cheers,
Sander
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
