Send a message when pressing Enter

Question

Here is my code:

<input type=\"text\" id='MsgToSend" + ToClient + "t" + FromClient + "' onkeypress='ClientOnTyping();' />

where the FromClient and the ToClient are dynamically generated.

JavaScript:

function ClientOnTyping() {
  if(e.keyCode==13) {
     // i know i should do this but my problem is what is 'e' in my case how can i specify it ?
  }

}

Have a look at [this article on quirksmode.org](http://www.quirksmode.org/js/events_access.html), especially [this section](http://www.quirksmode.org/js/events_access.html#link6). It explains how to access the event object, also with inline event handlers. — Felix Kling, Mar 09 '13 at 23:21
if i write e.keyCode==13 is my syntax correct or i should initialize 'e' in some ways ? bcs in tutorial it say : $("#example").keypress(function(e){if(e.KeyCode==13)}); but in my case the keypress function is predefined — Sora, Mar 09 '13 at 23:24
I recommend to read the other articles about even handling as well, it should give you a pretty good idea how it works. — Felix Kling, Mar 09 '13 at 23:34

Starx · Answer 1 · 2013-03-09T23:35:31.330

3

You need to attach an event listener on the element for keydown event.

var btn = document.getElementById('MsgToSend');
btn.addEventListerner('keydown', function (e) {
    if(e.keyCode==13) {
     // i know i should do this but my problem is what is 'e' in my case how can i specify it ?
    }
});

On traditional browsers, you can attach the event handler this way.

var btn = document.getElementById('MsgToSend');
btn.onkeydown = function (e) {
    e = e || window.event;
    var keyCode = e.keyCode || e.which;
    if(keyCode==13) {
     // i know i should do this but my problem is what is 'e' in my case how can i specify it ?
    }
});

edited Mar 09 '13 at 23:35

answered Mar 09 '13 at 23:23

Starx

77,474
47
185
261

1

+1, because you saved me typing the exact same answer... (specifically the bit about compensating for IE's interpretation of events.) – David Thomas Mar 09 '13 at 23:24
Mmh... if you use `addEventListerner` only, then there is no need to test for `window.event`. Or does IE9 not pass the event object to the handler? – Felix Kling Mar 09 '13 at 23:28
@FelixKling, I think it does. Isn't it safer this way? – Starx Mar 09 '13 at 23:29
1

Browser which implement the W3C `addEventListener` method will surely also pass the event object to the handler, so testing for `window.event` is just unnecessary. It would be different if you used traditional event handlers (i.e. `element.onkeydown = function...`. – Felix Kling Mar 09 '13 at 23:33

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

In the scope of the handler function, e is an event object created automatically whenever an event fires in the DOM. You need to simply pass it to your handler.

For example:

<input ...onkeypress="ClientOnTyping(event);">

and

function ClientOnTyping(e) {
    ...
}

Also, consider using unobtrusive code instead of obtrusive. See Difference between obtrusive and unobtrusive javascript and Starx's answer.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 09 '13 at 23:24

Boaz

19,892
8
62
70

It must be `onkeypress='ClientOnTyping(event);` and the function must be defined as `function ClientOnTyping(e) {...}`. – Felix Kling Mar 09 '13 at 23:26

Send a message when pressing Enter

2 Answers2