473,287 Members | 3,228 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Select list without a helper button

VK
A while ago there was a discussion how to implement a select list that
would call a function right upon new selection is being made w/o
clicking any additional buttons:

<http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/aa4a8da635e42592/ba2c264d6a9b3558?q=drag+group:comp.lang.javascript +author:VK&rnum=2&hl=en#ba2c264d6a9b3558>

The main issue was to overcome IE's accessibility bug: if user scrolls
the list using arrow keys (or an alternative input device) IE fires
onchange event on each scroll, without <Enter> confirmation. This way a
simple <select onchange="myFunction"> makes your list unaccessible for
non-mouse users. Recently I needed to bypass this issue myself (because
in big interface with many select/button pairs it gets crowdy and
ugly).

IMHO the solution appeared to be too simple to be good. It works on IE
and Opera 8 (except Opera seems doesn't support accesskey (?)
My FF is died today (my fault, not Mozilla). Does it work everywhere
else? That would be really great.

Thanks and thanks in advance to whoever will take a second to check it.

<html>
<head>
<title>Buttonless Select</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">

function keyMode(evt) {
var e = event || evt;
var obj = e.target || e.srcElement;
var key = e.which || e.keyCode;
obj.onchange = foo;
if (key == 13) {processSelected();}
}

function mouseMode(evt) {
var e = event || evt;
var obj = e.target || e.srcElement;
obj.onchange = processSelected;
}

function processSelected() {
alert("Selection detected!");
/* of course something more useful in the reality */
}

function foo() {}

function init() {
var elm = document.forms[0].elements[0];
elm.onkeydown = keyMode;
elm.onmousedown = mouseMode;
}

window.onload = init;
</script>

<style type="text/css">
body { background-color: #FFFFFF}
label { font: 10pt Verdana, Helvetica, sans-serif}
select { font: 10pt Verdana, Helvetica, sans-serif; background-color:
F5F5F5}
..brevier { font: 8pt Verdana, Helvetica, sans-serif}
..u { text-decoration: underline}
</style>

</head>

<body>
<form name="form1">
<label for="dataFile" accesskey="c"><span
class="u">C</span>atalog:</label>
<select id="dataFile">
<option value="0" selected>Please choose one...</option>
<optgroup label="Category One">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Category Two">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
<optgroup label="Category Three">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</optgroup>
<optgroup label="Category Four">
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
</optgroup>
</select>
<noscript>
<font face="Verdana, sans-serif" size="1"
color="red">Disabled</font>
</noscript>
<span class="brevier">Use your mouse or up/down arrow keys
(&lt;Enter&gt; to confirm).</span>
</form>

</body>
</html>

Jul 23 '05 #1
2 1991
On 20/07/2005 23:00, VK wrote:
A while ago there was a discussion how to implement a select list that
would call a function right upon new selection is being made w/o
clicking any additional buttons: [link snipped]

The main issue was to overcome IE's accessibility bug: if user scrolls
the list using arrow keys (or an alternative input device) IE fires
onchange event on each scroll, without <Enter> confirmation.
I wouldn't call it a bug. The change event is interpreted differently by
different browsers for different controls, and IE is not the only
browser to exhibit this particular behaviour.

The change event is meant to fire after a control has changed in value
since gaining focus /and/ it has subsequently lost focus. Sometimes that
is implemented, but sometimes a click, or some other form of
interaction, will be sufficient.

[snip]
[...] (except Opera seems doesn't support accesskey (?) [...]
It does but you need to switch into access key mode by pressing
Shift+Esc, first.
My FF is died today (my fault, not Mozilla). Does it work everywhere
else? That would be really great.
No. It's 'fine' in Opera 6, but only the keyboard will confirm in all
later versions (including 8). It errors out in Fx and even with
corrections, it fails in NN4. Then there's still the issue of it being
useless with no client-side script support, and it doesn't address the
issues that I've raised previously.

[snip]
function keyMode(evt) {
var e = event || evt;
You've been warned not to refer the global event object directly before,
and here it's come back to bite you.

[snip]
<span class="brevier">Use your mouse or up/down arrow keys
(&lt;Enter&gt; to confirm).</span>


Having to explain how a UI widget works is a sure sign that it's a badly
designed feature.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jul 23 '05 #2
VK
> > [...] (except Opera seems doesn't support accesskey (?) [...]

It does but you need to switch into access key mode by pressing
Shift+Esc, first.
Funny, I had to work yesterday on Windows 98 SE, so I installed Opera 8
there, and accesskey do not work at all (Shift+Esc did not help). But
my code worked (and working) just fine.

Today I reanimated my Windows XP, and accesskey work on the same sample
just fine (on the same Opera 8 build), whether you pressed Shift+Esc or
not. But the code doesn't work as you said. That Opera... That
Windows... That world.

Then there's still the issue of it being
useless with no client-side script support,
Well, for self-updating data-bound page it should not be a
consideration. It's like torturing yourselve with the question: "What
if my visitor will not have a browser?" There is <noscript> tag to
write some consolations and links, I'll do it, and nothing more I can
do.
And Lynx and Gother users are species misterious and usually shagging
on their own selectet places. I don't expect to see any of them around.
and it doesn't address the
issues that I've raised previously.
My issue was just to make the interface as compact as possible and
still Accessibility Act conformant: on the form that will never be
submitted by the definition. But I guess that the choice is either
"onchange" (bye-bye accessibility) or some code like this one (bye-bye
reability). Damn!

You've been warned not to refer the global event object directly before,
and here it's come back to bite you.


Sorry, nightly build!

But you did not say good word about my underlined style instead of
previous <u> tag :-(
I'm a good boy I am! :-)

Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Matthew Louden | last post by:
if the user select the EmployeeID in drop down list, and then click the submit button, and it will look up database and show the Employee Name in the text box, this is easy. But my case is:...
2
by: Mark | last post by:
Hi - I have a dynamically created table, which has a number of forms - each named consecutively as 'adduserX' where X is a number generated from ASP. Within each form, I need to have a button...
1
by: fig000 | last post by:
Hi, I want to use a select object in asp and have the user pick something from this select and have javascript open a window fired by an event. Once the new window is open it displays another...
7
by: lawrence | last post by:
Can I do something like the following to get a browser to redirect to a new url every time someone picks a new value in a select box? function changeUrl() { var redirect; redirect =...
19
by: William Wisnieski | last post by:
Hello Everyone, I have a main form with a datasheet subform that I use to query by form. After the user selects two criteria on the main form and clicks the cmdShowResults button on the main...
23
by: Darryl Kerkeslager | last post by:
I frequently use OpenArgs to pass a value to a form; it would be nice if there was a similarly easy way to return a value from a called form. Darryl Kerkeslager
1
by: Joe Attardi | last post by:
Hi all, On a form on one of my pages I have two <select> elements, and each one is paired up with a radio button. The idea is to choose an item from one list or the other and select the radio...
4
by: rn5a | last post by:
A Form has 2 select lists. The 1st one whose size is 5 (meaning 5 options are shown at any given time) allows multiple selection whereas the 2nd one allows only 1 option to be selected at a time. ...
5
by: raylopez99 | last post by:
I have a form, Form6, that has a bunch of buttons overlaid on it. I want to be able to click on any arbitrary area of the form, and if that area of the form is overlaid by a button, I want to...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.