C
Csaba Gabor
The below is an example of a select element that work in FF 1.5 and IE
6 that exhibits FF type behaviour. You make a selection by clicking on
an option, pressing Enter when it is highlighted, or removing focus
from the select element. This contrasts from IE's way in that IE
effects a selection when you navigate with the arrow keys, or close the
opened select element (via alt+up/down arrow).
What happens in the example is that whenever a selection is made, the
select element immediately resets itself. The "Dummy link" is in the
example to provide a focusable element for tabbing away from the select
element.
A question in the opposite direction of getting FF select elements to
behave as IE's was discussed last August at:
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/618645fa2fe904be/
Enjoy,
Csaba Gabor from Vienna
<html><head><title>Unselectable options</title></head>
<body onload="init()">
This page shows a cross browser (IE and FF) select element
that responds when the element is changed according to the FF
notion.<br>
In particular, change is registered when you click
on an option, you press Enter on it, or focus leaves
the select element.
<br><br>
Notice that change is not registered when you use the arrow keys
(as it would be under IE), nor the Alt+up/down arrow keys.<br>
Remember that if you have the select element dropped down, you will
need two mouse clicks to remove focus from the it.
<br><br>
<form name=cform method=post action="">
<select title='access key: s' alt='access key: s'
accessKey=s name=mySel id=mySel>
<option>Make selection</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option></select>
<a href="" onclick='return false;'>Dummy link</a>
</form>
<div id=res>SELECT events:</div>
<script type='text/javascript'>
window.ctr = 0; // statistical, debugging info
function init() {
var mySel = document.getElementById('mySel');
mySel.style.width = mySel.offsetWidth;
mySel.options[0].style.display = "none";
if (document.all) {
mySel.onclick = function(){action2(this);}
mySel.onblur = function(){action2(this);}
mySel.onkeydown = selKeyDown;
} else if (mySel.addEventListener) {
mySel.addEventListener("click", function(){action2(this)}, false);
mySel.addEventListener("change", function(){action2(this)}, false);
}
}
function selKeyDown() {
// detect Enter key (sans alt), then allow for settling
if (window.event.keyCode==13 && !window.event.altKey)
window.setTimeout(function(ctl){ return function() {
action2(ctl);}}(this),100);
}
function action2(selElem) {
ctr++;
if (!selElem || !selElem.selectedIndex) return;
// --- The actual action goes here ---
var res = document.getElementById('res');
res.innerHTML += (res.innerHTML ? "<br>" : "")+
"[" + (ctr++) + "] " + selElem.id + " => ";
res.innerHTML += selElem.options[selElem.selectedIndex].text;
selElem.selectedIndex = 0;
}
</script>
</body></html>
6 that exhibits FF type behaviour. You make a selection by clicking on
an option, pressing Enter when it is highlighted, or removing focus
from the select element. This contrasts from IE's way in that IE
effects a selection when you navigate with the arrow keys, or close the
opened select element (via alt+up/down arrow).
What happens in the example is that whenever a selection is made, the
select element immediately resets itself. The "Dummy link" is in the
example to provide a focusable element for tabbing away from the select
element.
A question in the opposite direction of getting FF select elements to
behave as IE's was discussed last August at:
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/618645fa2fe904be/
Enjoy,
Csaba Gabor from Vienna
<html><head><title>Unselectable options</title></head>
<body onload="init()">
This page shows a cross browser (IE and FF) select element
that responds when the element is changed according to the FF
notion.<br>
In particular, change is registered when you click
on an option, you press Enter on it, or focus leaves
the select element.
<br><br>
Notice that change is not registered when you use the arrow keys
(as it would be under IE), nor the Alt+up/down arrow keys.<br>
Remember that if you have the select element dropped down, you will
need two mouse clicks to remove focus from the it.
<br><br>
<form name=cform method=post action="">
<select title='access key: s' alt='access key: s'
accessKey=s name=mySel id=mySel>
<option>Make selection</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option></select>
<a href="" onclick='return false;'>Dummy link</a>
</form>
<div id=res>SELECT events:</div>
<script type='text/javascript'>
window.ctr = 0; // statistical, debugging info
function init() {
var mySel = document.getElementById('mySel');
mySel.style.width = mySel.offsetWidth;
mySel.options[0].style.display = "none";
if (document.all) {
mySel.onclick = function(){action2(this);}
mySel.onblur = function(){action2(this);}
mySel.onkeydown = selKeyDown;
} else if (mySel.addEventListener) {
mySel.addEventListener("click", function(){action2(this)}, false);
mySel.addEventListener("change", function(){action2(this)}, false);
}
}
function selKeyDown() {
// detect Enter key (sans alt), then allow for settling
if (window.event.keyCode==13 && !window.event.altKey)
window.setTimeout(function(ctl){ return function() {
action2(ctl);}}(this),100);
}
function action2(selElem) {
ctr++;
if (!selElem || !selElem.selectedIndex) return;
// --- The actual action goes here ---
var res = document.getElementById('res');
res.innerHTML += (res.innerHTML ? "<br>" : "")+
"[" + (ctr++) + "] " + selElem.id + " => ";
res.innerHTML += selElem.options[selElem.selectedIndex].text;
selElem.selectedIndex = 0;
}
</script>
</body></html>