10

im trying to make my own chat... so i have an input text field, the submit button, isn't even submit, its just a button.... so when the enter key is pressed, i need the value of the input field to appear in my textarea (which is readonly)...

well look.. make long story short, i just want a basic enter key event handler, i know it works perfectly with submit buttons cus you don't need to program anything at all, its default. but my button is type="button" .... so when you press enter nothing happens... how do i trigger my button by pressing enter?

Juan Veliz
  • 103
  • 1
  • 1
  • 4
  • 2
    Check this thread: http://stackoverflow.com/questions/155188/trigger-button-click-with-javascript-on-enter-key-in-text-box – keyboardP May 09 '11 at 00:26
  • In a form, a button element is a submit button by default. If you setup the input in a form and use a normal submit, you should be able to get it all working with no script. Then you can add an onsubmit listener when the page loads to replace the submit with XHR. Now you have a chat page that works with or without JS and you have a great fallback. – RobG May 09 '11 at 00:30
  • whats XHR, problem with making it a submit button, is that when the button is pressed, the page has to refresh everytime a chat message is sent, i got it all working with AJAX and everything, MySQL databasing, etc, but I HAVE TO CLICK the button everything i send a message into the chatbox, how lame.... i need the ENTER event handler – Juan Veliz May 09 '11 at 00:43
  • 1
    @Juan - The answer is in the link I provided. There's code using JQuery and there's code using vanilla Javascript. Take your pick. – keyboardP May 09 '11 at 00:50
  • If you wish the page not to refresh when a submit is pressed, you should handle the form's onsumbit, do what you want, and return `false`. – entonio May 09 '11 at 01:14
  • @Juan - you want an event **listener**. There is no "enter" event, presssing enter when focus is on a form input control submits the form and hence a submit event is dispatched. You put a submit listener on the form so that if javascript is available, you can do an xmlHTTPRequest (aka AJAX) and cancel submitting the form. So you can give users both a submit button and have pressing enter submit the form. Some people like clicking buttons... – RobG May 09 '11 at 02:00

3 Answers3

16

You could make the button type submit, or you can use the onkeyup event handler and check for keycode 13.

Here's a list of key codes: Javascript Char codes/Key codes). You'll have to know how to get the keycode from the event.

edit: an example

HTML:

<input onkeyup="inputKeyUp(event)" ...>

Plain javascript:

function inputKeyUp(e) {
    e.which = e.which || e.keyCode;
    if(e.which == 13) {
        // submit
    }
}
entonio
  • 2,143
  • 1
  • 17
  • 27
  • that keycode 13 is probably what im looking for, but its unfamiliar to me i haven't seen it or used it, could you provide a code snippet for me – Juan Veliz May 09 '11 at 00:44
  • thanks entonio that was pretty good, easy answer, short and not complicated – Juan Veliz May 17 '11 at 15:35
3

Here is a working code snippet for listening for the enter key

$(document).ready(function(){

    $(document).bind('keypress',pressed);
});

function pressed(e)
{
    if(e.keyCode === 13)
    {
        alert('enter pressed');
        //put button.click() here
    }
}
samccone
  • 10,746
  • 7
  • 43
  • 50
1

Here is a version of the currently accepted answer (from @entonio) with key instead of keyCode:

HTML:

<input onkeyup="inputKeyUp(event)" ...>

Plain javascript:

function inputKeyUp(e) {
    if (e.key === 'Enter') {
        // submit
    }
}
Marcus
  • 3,459
  • 1
  • 26
  • 25
  • Interesting, I believe this didn't exist at the time. I thought these days nobody wrote this kind of event handler anymore. – entonio Sep 28 '18 at 15:41
  • Don't copy/paste the same answer all over, post at one place and then vote to close on the other, like I just did. – Asons Sep 30 '18 at 06:16
  • [Is it ok to copy/paste myself?](https://meta.stackoverflow.com/questions/317609/is-it-ok-to-copy-paste-myself) – Asons Sep 30 '18 at 06:39
  • Good points, entonio and LGSon. I was just trying to spread the word about event.key. It was not an exact copy/paste, but your comment and downvote got me to read up more on flagging and related topics to reduce my ignorance of Stack Overflow etiquette, so thanks for that. – Marcus Oct 02 '18 at 03:42