SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)

    On Enter key press, which event is that?

    Hi All!

    Say I have a text field

    <input type =text name="thisthing" id = "thisthing" value= "" />

    and the user enters some text and hits "Enter" key, how can I capture that enter event?

    It is not submitting a form, but it does cause an action, I am really looking for a one liner rather than a function.

    Not using a library at the moment, but am thinking of adding moo.fx shortly - is this kind of thing handled in that lib .... I wonder.

    Must work on IE6 >= and FF2 >=

    Thanks a bunch.

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a read of this - http://www.quirksmode.org/js/keys.html - and the code you need once you have it capturing key presses is 13 afaik.

  3. #3
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the link Brian.

    Turning out to be as complicated as I feared it might. Cheers anyhow.

  4. #4
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I found out I wasn't using the event capture correctly, tsk window.event.

    Still, this works win32 IE, FF.
    Code:
    <input type=text id=search name=search 
    value="" 
    onkeydown="
    if(event.keyCode == 13)
    {Dir.showOrgs( 'search', this.value); 
    }
    " 
    />
    So your user can enter text, and press Enter to provoke an action (like a real form element behaves) without having to press a 'go' button to force the action - the button needs to be there anyway for those that prefer to using a mouse and for whom the keyCode thing does not work.

    Just a small thing, for an intranet app.

    Hope it helps someone in a similar boat.

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Useful, thanks cups!

    Just one question, why couldn't you just put the input fields in a form?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Cor blimey, now your asking.

    Ok, its part of an Ajax-PHP framework (using Xajax) and the screen can contain many 'functions' and 'behaviours'.

    I have bad memories of forms as <form></forms> displaying differently depending on which browser, inside tables etc. Maybe it was my skill level at the time, but it was really tough to sort out - and the code was really miserable.

    Also I want to be able to add small input form elements like that above, without interfering with the main forms (document.forms[0]) on the page - especially as the forms appear and vanish from the Dom like butterflies.

    Like I stressed, this in an intranet app (lying, actually its a CMS admin area) where no cookies and no JS means you are logged out - and not something I would do on a website - although the snippet does degrade because if it doesnt work - then the user has to hit the 'go' button

    If the 'go' button I mentioned was a Submit element (which is what I would do on a public facing website) then hitting Enter would send the form anyhow. Maybe the trick has another use, who knows.

    HTH


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •