I am trying to capture onKeyUp when enter is pressed without the use of jQuery.

My current code is:

$('#chatboxtextarea').on('keyup', function (e) {
        var msg = document.getElementById('chatboxtextarea').value;
        if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') != "" && e.keyCode == 13) {
            var textarea = document.getElementById('chatboxtextarea');
            textarea.value = '';

            .....code to send.....


        } else if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') == '') {
            var textarea = document.getElementById('chatboxtextarea');
            textarea.value = '';
        }
    });

How could this be done in regular JavaScript instead?

I am trying to capture onKeyUp when enter is pressed without the use of jQuery.

My current code is:

$('#chatboxtextarea').on('keyup', function (e) {
        var msg = document.getElementById('chatboxtextarea').value;
        if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') != "" && e.keyCode == 13) {
            var textarea = document.getElementById('chatboxtextarea');
            textarea.value = '';

            .....code to send.....


        } else if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') == '') {
            var textarea = document.getElementById('chatboxtextarea');
            textarea.value = '';
        }
    });

How could this be done in regular JavaScript instead?

• javascript
• jquery

• onkeyup is a Javascript event – Harsha Venkataramu Commented Mar 3, 2013 at 18:10
• 1 Change the only jquery you have to document.getElementById("chatboxtextarea").onkeyup=function() {} – mplungjan Commented Mar 3, 2013 at 18:12
• How would that code look? – Alosyius Commented Mar 3, 2013 at 18:13
• 1 @mplungjan Why post an answer as a ment? – Lightness Races in Orbit Commented Mar 3, 2013 at 18:18
• Good question. Perhaps I did not expect the question to survive, and did not have enough characters to save as answer without writing a bit more. I am on my ipad, a bit of work to write code – mplungjan Commented Mar 4, 2013 at 5:31

2 Answers 2

Simply:

document.getElementById('chatboxtextarea').onkeyup = function (e) {
    e = e || window.event;
    var textarea = this;
    var msg = textarea.value;
    if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') != "" && e.keyCode == 13) {
        textarea.value = '';

        .....code to send.....

    } else if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') == '') {
        textarea.value = '';
    }
};

edit:

Alternatively you could call something like the following to add the event; passing the element object, the event type (without 'on'), the function to call and whether to use capturing, just to utilise the different browser methods:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
  }
  else if (elm.attachEvent) {
    elm.attachEvent('on' + evType, fn);
  }
  else {
    elm['on' + evType] = fn;
  }
};

ie:

addEvent(document.getElementById('chatboxtextarea'), 'keyup', 
  function(e) {
    e = e || window.event;
    ...
  }, false);

jQuery does a lot of plex code internally that would be difficult to mimic simply. If all you want is to bind the same event to the ID in question, it's not so bad.

For selecting the element:

document.getElementById('chatboxtextarea')
document.querySelector('#chatboxtextarea')
document.querySelectorAll('#chatboxtextarea')[0]

For attaching the event:

.addEventListener('keyup', function (e) {

For IE8-, you must use.attachEvent, but it is not an exact analog. For ancient browsers, use the .onkeyup attribute.