V
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...cript+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>
would call a function right upon new selection is being made w/o
clicking any additional buttons:
<http://groups-beta.google.com/group...cript+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>
