Changing action of <Enter> key in text input controls

Discussion in 'HTML' started by P E Schoen, Aug 8, 2012.

  1. P E Schoen

    P E Schoen Guest

    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
    P E Schoen, Aug 8, 2012
    #1
    1. Advertising

  2. On Wed, 8 Aug 2012 06:00:33 -0400, "P E Schoen" <>
    wrote:

    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
    Gene Wirchenko, Aug 8, 2012
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QnJpYW4gS2l0dA==?=

    How to manage "Input Image" controls and the 'Enter' key

    =?Utf-8?B?QnJpYW4gS2l0dA==?=, May 16, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    444
    =?Utf-8?B?QnJpYW4gS2l0dA==?=
    May 16, 2005
  2. BrianDH

    Enter Key H*ll, control enter key submit button

    BrianDH, Jan 12, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    375
    Anders Matthiessen
    Jan 12, 2005
  3. M P
    Replies:
    1
    Views:
    456
  4. Matt
    Replies:
    1
    Views:
    496
    Michael Winter
    Mar 6, 2004
  5. HopfZ
    Replies:
    0
    Views:
    542
    HopfZ
    Aug 28, 2006
Loading...

Share This Page