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
(<Enter> to confirm).</span>
</form>
</body>
</html>
2  2000 
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
(<Enter> 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.
> > [...] (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! :-) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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:...
|
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...
|
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...
|
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 =...
|
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...
| | |
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
|
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...
|
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.
...
|
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...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
