将按键或事件侦听器添加到输入中，“ TypeError：…addEventListener不是函数”

Question

I'm working on a form where I do not want enter/return to submit the form so I used a function like this.

    $('[name="form"]').keypress(function(e) {
        var charCode = e.charcode || e.keyCode || e.which;
        if (charCode === 13) {
            e.preventDefault();
            return false;
        }
    });

That works, but now I want to assign the enter/return to perform functions on two inputs on the form. I'm totally stuck.

To get the inputs I've tried vanilla js calling by id, jQ calling by id and then a mixer of the two with variables. I've also tried .keypress, .keydown, .keyup instead of the attachEventListener method. No matter what I do, I get this error in console.

"TypeError: ...addEventListener is not a function" (or keypress, keydown etc.)

I've also researched a good deal but can't find any solution. I appreciate any suggestions. Here is this block of code in it's current form that's giving the trouble.

    var yelpInput = $('#inputURL');
    var googleInput = $('#googleURL');

    yelpInput.addEventListener("keydown", function(e) {
        if (e.keyCode === 13 ) {                        
            alert('do stuff!');
        }
    });

    // Google
    googleInput.addEventListener("keydown", function(e) {
        if (e.keyCode === 13 ) {    
            alert('do stuff!');
        }
    });

Thanks

Answer 1

var yelpInput = $('#inputURL');
var googleInput = $('#googleURL');

yelpInput.keydown(function(e) {
    if (e.keyCode === 13 ) {                        
        alert('do stuff!');
    }
});

// Google
googleInput.keydown(function(e) {
    if (e.keyCode === 13 ) {    
        alert('do stuff!');
    }
});

Answer 2

yelpInput is jQuery wrapped object which does not have addEventListener method.

Use .on to attach event-handler on jQuery wrapped object or yelpInput[0].addEventListener / yelpInput.get(0).addEventListener to attach event using JavaScript as yelpInput[0] will be an DOMElement not jQuery-wrapped object.

 var yelpInput = $('#inputURL'); var googleInput = $('#googleURL'); yelpInput.on("keydown", function(e) { //-----^^^ if (e.keyCode === 13) { alert('do stuff!'); } }); googleInput.on("keydown", function(e) { //-------^^^ if (e.keyCode === 13) { alert('do stuff!'); } });