Changing action of <Enter> key in text input controls

[P E Schoen]

I noticed that in IE9 if I entered data in a text box in a form and hit the
<Enter> key, it would cause an error sound and not act as I expected, like
the <Tab> key, to advance to the next control and activate the onChange
event to update other controls. It worked OK in Firefox but not IE9. Grrr!

So I found some references:
http://webcheatsheet.com/javascript/disable_enter_key.php
http://www.cs.tut.fi/~jkorpela/forms/enter.html

The second reference used a rather convoluted way to achieve the desired
effect. But the first reference gave me an idea:

<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text"))
{
// window.postMessage(String.fromCharCode(9), window.location);
node.blur();
return false;}
}

document.onkeypress = stopRKey;

</script>

I tried to simulate the sending of the <Tab> character to replace the <CR>
character, but that didn't work. However, the blur() works well enough
except it removes focus and you have to click on the next control.

I have implemented this here:
http://www.enginuitysystems.com/EVCalculator.htm

Any ideas on a better way to do this?

Thanks.

Paul

 

[Gene Wirchenko]

You might have done better to post to comp.lang.javascript as
your problem is not an HTML one.

I noticed that in IE9 if I entered data in a text box in a form and hit the
<Enter> key, it would cause an error sound and not act as I expected, like
the <Tab> key, to advance to the next control and activate the onChange
event to update other controls. It worked OK in Firefox but not IE9. Grrr!

It is trying to submit the form.

[snip]

Any ideas on a better way to do this?

I have my input controls' onkeydown clause
onkeydown="return DoKeydownInput(event);"
The code following is very much tied to my special form handler, but
as you might share some of my concerns (such as <Enter> still being
wanted in a textara control, I left it all in.

Caveat: I am not sure that my event handling works properly
outside of IE. If you correct that part, please let me know what you
did and why.

***** Start of Code *****
// DoKeydownInput()
// Handle onkeydown of Input Controls
// Last Modification: 2012-03-27
//
// Do not modify any assignments to fBypassValidation in this method
without
// first reading the note under <Esc> handling in this method.

function DoKeydownInput
(
theEvent // event: event that fired (assumed to be keyboard
event)
)
{
var theKey=theEvent.keyCode;
fBypassValidation=true;

// <Enter>
// Do not allow <Enter> through on a text control as it would submit
the
// form. With a textarea control, this does not happen -- <Enter>
inserts
// a line break, so allow it.
if (theKey==13) // Kludge: hardcoded value: <Enter> keycode
{
switch (FieldData[document.activeElement.id].ControlType)
{
case "text":
alert(
"Use the "+Gebi("btnSubmit").value+
" button instead to submit the form.");
// not a debugging alert()
fBypassValidation=false;
return false;
case "textarea":
fBypassValidation=false;
return true;
default:
// Do nothing.
}
}

// <Esc>
// The logic to implement form resetting here can run afoul of the
// validation code with events that I have not been able to trace.
Setting
// fBypassValidation=false after doing the reset seems to
immediately
// trigger validation. However, I have hit on a solution. I do not
reset
// fBypassValidation in this handling. This might appear to disable
all
// validation afterwards, but this method is called frequently and
more
// importantly, before any other validation would be executed. If
the next
// character is <Enter>, it will be processed and fBypassValidation
reset.
// If the next character is <Esc>, the situation with
fBypassValidation
// simply continues. If the next character is any other character,
// fBypassValidation is set to false, and no validation gets
triggered.
// Success!
if (theKey==27) // Kludge: hardcoded value: <Esc> keycode
{
DoFormReset();
return false;
}

// Any other key
fBypassValidation=false;
return true;
}
***** End of Code *****

Sincerely,

Gene Wirchenko