javascript - onKeyUp without jQuery? - Stack Overflow

admin管理员组

文章数量:1389799

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

Share Improve this question Follow edited Jun 1, 2013 at 11:21 thecodedeveloper. 3,24055 gold badges3939 silver badges6969 bronze badges asked Mar 3, 2013 at 18:09 AlosyiusAlosyius 9,1512626 gold badges7878 silver badges121121 bronze badges 5

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptonKeyUp without jQueryStack Overflow