Capture ENTER in input field

Discussion in 'Javascript' started by Tom de Neef, Mar 1, 2008.

  1. Tom de Neef

    Tom de Neef Guest

    I have a form with a text field and a button and a simple script:
    <script type=text/javascript>
    function action()
    {
    document.getElementById("result").innerHTML =
    someProcess(document.form.input.value)
    }
    </script>
    <form name="form">
    <input type="text" name="input" value="">
    <input type=button value="Go" onclick=action()>
    </form>
    <p id="result">&nbsp;</p>

    It does what it should do: display the results of some process, acting on
    the value of the text field, when the button is clicked.

    My question: is it possible to and add an event handler that is triggered
    when the user completes his input with an Enter key hit (and maybe scrap the
    button) ? Like onenterkeydetected=action().

    Thanks,
    Tom
     
    Tom de Neef, Mar 1, 2008
    #1
    1. Advertising

  2. Tom de Neef

    Tom de Neef Guest

    I have found that onsubmit should be attached to the form.
    Can anyone explain why the page is reloaded after you input some string
    followed by an enter key?

    <html>
    <head>
    <script type=text/javascript>
    function act(txt)
    {
    document.getElementById("result").innerHTML = txt
    }
    </script>
    </head>

    <body onload=alert('loading')>
    <form name="form" onsubmit=act(this.input.value)>
    <input type="text" name="input">
    <input type="button" name="go" value="Go" onclick=act(input.value)>
    </form>
    <p id="result">result</p>
    </body>
    </html>

    Enter "test" and click the button. "result" will be replaced by "test".
    Enter "test" followed by enter key. Same thing happens (which you can't see)
    and then the page is reloaded...!
    Tom
     
    Tom de Neef, Mar 1, 2008
    #2
    1. Advertising

  3. Tom de Neef wrote:
    > I have found that onsubmit should be attached to the form.
    > Can anyone explain why the page is reloaded after you input some string
    > followed by an enter key?
    > [...]
    > <body onload=alert('loading')>
    > <form name="form" onsubmit=act(this.input.value)>


    Your markup is invalid and you don't return a value to the `onsubmit' event
    handler.

    http://validator.w3.org/
    http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
     
    Thomas 'PointedEars' Lahn, Mar 1, 2008
    #3
  4. Tom de Neef

    Tom de Neef Guest

    "Thomas 'PointedEars' Lahn" wrote:
    > Your markup is invalid and you don't return a value to the `onsubmit'
    > event
    > handler.
    >


    Thanks for the feedback, sorry for the trouble. I will improve my posts.
    Back to my original problem. I would like to execute the act function when
    the input is terminated with an enter, rather than having to click the
    button. (And the form should not submit - the form is there only to allow a
    text field.)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>test</title>
    <script type="text/javascript">
    function act(txt)
    {
    document.getElementById("result").innerHTML = txt
    return false // ??
    }
    </script>
    </head>

    <body>
    <form action="">
    <input type="text" name="input">
    <input type="button" name="go" value="Go" onclick="act(input.value)">
    </form>
    <p id="result">result</p>
    </body>
    </html>
     
    Tom de Neef, Mar 1, 2008
    #4
  5. Tom de Neef wrote:
    > "Thomas 'PointedEars' Lahn" wrote:
    >> Your markup is invalid and you don't return a value to the `onsubmit'
    >> event handler.

    >
    > Thanks for the feedback, sorry for the trouble. I will improve my posts.


    It was rather meant as a hint towards the cause of your "original" problem.
    Scripts based on invalid code are not likely to execute properly.

    > Back to my original problem. I would like to execute the act function when
    > the input is terminated with an enter, rather than having to click the
    > button. (And the form should not submit - the form is there only to allow a
    > text field.)
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


    This triggers Standards Compliance Mode for Gecko, and Compatibility Mode
    in IE 6 (see <http://quirksmode.org/css/quirksmode.html> pp.) You should
    prefer:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://w3.org/TR/html4/loose.dtd">

    Or, even better, HTML 4.01 Strict.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://w3.org/TR/html4/strict.dtd">

    > <html>
    > <head>
    > <title>test</title>


    http://www.w3.org/QA/Tips/good-titles

    > <script type="text/javascript">
    > function act(txt)
    > {
    > document.getElementById("result").innerHTML = txt


    Very bad style. D::gEBI() is a standardized method, `innerHTML' is a
    proprietary feature. Never use those two together without sufficient
    feature tests, and avoid such reference worms in general. That said, try to
    avoid the error-prone `innerHTML' property; use document tree modification
    methods instead.

    > return false // ??


    Correct.

    > }
    > </script>
    > </head>
    >
    > <body>
    > <form action="">
    > <input type="text" name="input">
    > <input type="button" name="go" value="Go" onclick="act(input.value)">


    There is where you don't return the returned value to the *event handler*.

    <input type="button" name="go" value="Go"
    onclick="return act(this.form.elements['input'].value);">

    However, you are looking for

    <input name="input" onkeypress="return ..." onkeyup="return ...">

    The general button is not a submit button and therefore has nothing to do
    with the other `input' element.

    So you would probably be best off using a submit button instead:

    <form action="" onsubmit="return act(...);">

    <input name="..."
    onkeypress="if (typeof event != 'undefined') handleKeypress(event)"
    onkeyup="if (typeof event != 'undefined') handleKeypress(event)">

    <input type="submit" value="Go">

    </form>


    HTH

    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Mar 1, 2008
    #5
  6. Tom de Neef

    Tom de Neef Guest

    "Thomas 'PointedEars' Lahn" <> wrote:
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    >
    > This triggers Standards Compliance Mode for Gecko, and Compatibility Mode
    > in IE 6 (see <http://quirksmode.org/css/quirksmode.html> pp.) You should
    > prefer:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://w3.org/TR/html4/loose.dtd">
    >
    > Or, even better, HTML 4.01 Strict.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://w3.org/TR/html4/strict.dtd">
    >


    I will go thru all my files and see what needs to be changed to make them
    valid 'strict' docs.

    >> function act(txt)
    >> {
    >> document.getElementById("result").innerHTML = txt

    >
    > Very bad style. D::gEBI() is a standardized method, `innerHTML' is a
    > proprietary feature. Never use those two together without sufficient
    > feature tests, and avoid such reference worms in general. That said, try
    > to
    > avoid the error-prone `innerHTML' property; use document tree modification
    > methods instead.
    >


    I have tried
    function act(txt)
    {
    var para = document.getElementById("result")
    para.removeChild(para.firstChild)
    para.appendChild(document.createTextNode(txt))
    return false
    }
    But the txt parameter will be filled from many places with 'highlighted'
    text (i.e. text containing <B>, <BR> and <FONT> tags. These tags are not
    parsed in this way. If I parse them to split the text and create new nodes
    for these tags, am I not doing what I expect innerHTML to do?

    <snip>

    > So you would probably be best off using a submit button instead:
    >
    > <form action="" onsubmit="return act(...);">
    >
    > <input name="..."
    > onkeypress="if (typeof event != 'undefined') handleKeypress(event)"
    > onkeyup="if (typeof event != 'undefined') handleKeypress(event)">
    >
    > <input type="submit" value="Go">
    >
    > </form>


    This helped a lot! The solution is in the submit button.
    <form action="" onsubmit="return act(this.input.value)">
    <div>
    <input type="text" name="input" >
    <input type="submit" value="Go">
    </div>
    </form>
    This will call the onsubmit handler when the button is pressed and also when
    the string is terminated by an Enter.
    Thank you very much.
    Tom
     
    Tom de Neef, Mar 1, 2008
    #6
    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. Guy
    Replies:
    5
    Views:
    2,845
    brucie
    Dec 13, 2003
  2. =?Utf-8?B?am9l?=
    Replies:
    0
    Views:
    741
    =?Utf-8?B?am9l?=
    Sep 28, 2006
  3. John English

    Handling Enter key in text input field?

    John English, Nov 19, 2003, in forum: Javascript
    Replies:
    1
    Views:
    241
    Vjekoslav Begovic
    Nov 19, 2003
  4. HopfZ
    Replies:
    0
    Views:
    597
    HopfZ
    Aug 28, 2006
  5. Sound
    Replies:
    2
    Views:
    465
    Randy Webb
    Sep 28, 2006
Loading...

Share This Page