Paul said:
Hi,
I did not try before - my mistake - because I _knew_
that Firefox
erases the text _before_ the functions linked to OnKeyDown is called,
but I did not pay attention that you _store_ the whole content -
so even if it's erased, you restore it from the variable.
Yes, your code works in _your_ variant - when onkeydown is used
in INPUT control itself. But it does not work in my code -
I have it - forgot for what reason - in a <form
tag and not in the <input tag.
I presume you did that so you only need to put one handler on the form
and also because in IE a double-escape clears the entire form, not just
the input that has focus (as in Firefox).
This gave me a brainstorm: for Gecko browsers use addEventListener and
stopPropagation in the capture phase. After trial and error to discover
that it doesn't work, I found that quirksmode also says that you can't
cancel the capture phase of an event, only the bubbling phase.
<URL:
http://www.quirksmode.org/js/events_order.html>
I wonder why it's not possible for stopPropagation to take a single
boolean argument to determine whether to stop events on the capture or
bubble phases, just like addEventListener does to determine whether to
fire events on capture or bubble? The default could be on bubble
(false) for backward compatibility.
There is a stopImmediatePropagation in DOM 3, but it doesn't seem to be
implemented yet in Firefox:
<URL:
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event-stopImmediatePropagation>
Anyhow, figured the 'best' way is to add a single event handler to the
form. If addEventListener supported (Gecko /et al/), the setTimeout()
hack is added, if attachEvent supported (IE, others?) a simple 'return
false if escape is pressed' function is added.
The saving is that you can use script to put the handler on the handler
on the form and fire on the capture phase for Gecko browsers *before*
input is cleared, so you can effectively disable the Esc key for text
inputs in script-enabled browsers - sample below (lightly tested in
Firefox 1.5 and IE 6 only):
<script type="text/javascript">
function addEvt(elID, funcRef)
{
var el;
if ( !document.getElementById
|| !(el = document.getElementById(elID)) ){
return;
}
if (el.addEventListener){
// For Gecko, use the setTimeout hack
el.addEventListener('keydown', stopEsc, true);
} else if (el.attachEvent){
// For IE, just return false if Esc pressed
el.attachEvent('onkeydown', function(){
return !isEsc();
});
}
}
function isEsc(e)
{
var e = e || window.event;
var kCode = e.keyCode || e.which;
return kCode && '27' == kCode;
}
function stopEsc(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
var val;
if ('input' == tgt.nodeName.toLowerCase()
&& 'text' == tgt.type
&& (val = tgt.value)){
if (isEsc(e)){
setTimeout(function(){tgt.value=val;},10);
return false;
}
}
}
window.onload = function() {
addEvt('formA', stopEsc);
}
</script>
<form name="formA" id="formA" action="">
<div>
<!-- Dummy inputs for test -->
<input type="text">
<input type="text">
<input type="checkbox" name="cb-01">
<input type="checkbox" name="cb-02">
</div>
</form>
