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  1945 
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: Rina0 |
last post by:
Cybersecurity engineering is a specialized field that focuses on the design, development, and implementation of systems, processes, and technologies that protect against cyber threats and...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM)
The start time is equivalent to 19:00 (7PM) in Central...
|
by: erikbower65 |
last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps:
1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal.
2. Connect to...
|
by: linyimin |
last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
|
by: Taofi |
last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same
This are my field names
ID, Budgeted, Actual, Status and Differences
...
|
by: Rina0 |
last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
|
by: DJRhino |
last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer)
If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _
310030356 Or 310030359 Or 310030362 Or...
|
by: lllomh |
last post by:
Define the method first
this.state = {
buttonBackgroundColor: 'green',
isBlinking: false, // A new status is added to identify whether the button is blinking or not
}
autoStart=()=>{
|
by: lllomh |
last post by:
How does React native implement an English player?
| |
