没有jQuery的KeyUp？

Question

我试图在没有使用jQuery的情况下按下enter时捕获onKeyUp。

我目前的代码是：

$('#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 = '';
        }
    });

如何在常规JavaScript中完成？

Answer 1

简单地：

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 = '';
    }
};

修改

或者，您可以调用以下内容来添加事件;传递元素对象，事件类型（没有'on'），要调用的函数以及是否使用捕获，只是为了利用不同的浏览器方法：

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;
  }
};

即：

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

Answer 2

jQuery在内部执行很多复杂的代码，很难简单地模仿。如果您想要的只是将相同的事件绑定到相关的ID，那就不是那么糟糕了。

用于选择元素：

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

附加活动：

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

对于IE8-，您必须使用.attachEvent，但它不是一个精确的模拟。对于古老的浏览器，请使用.onkeyup属性。