Listen for keyup on all input fields

Question

Im trying to capture the keyup on all input fields on a page.

My current code is:

var els = document.querySelectorAll('input');
for (var i = 0; i < els.length; i += 1) {
    addEvent('keyup', els[i], makeHandler(els[i]));
}

function makeHandler(field) {       
    console.log(field.value);

}

function addEvent(evnt, elem, func) {
    if (elem.addEventListener) {
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { 
        elem.attachEvent("on"+evnt, function(e) {
            e = e || window.event; 
            if (!e.preventDefault) {
                e.preventDefault = preventDefaultOnIE;
            }
            func.call(this, e);
        });
    } else { // No much to do    
        elem[evnt] = func;       
    }
}

But for some reason its only capturing the value on page load, not once i begin to type in any of the fields.

Any ideas what I'm doing wrong?

Chris · Accepted Answer · 2014-03-10T07:00:18.467

3

The problem is with your makeHandler function. makeHandler(els[i]) is being evaluated and the return value (undefined, in this case) is being passed to addEvent as a handler. Try:

function makeHandler(field) {
    return function() { 
        console.log(field.value);
    };
}

This way, makeHandler(els[i]) will return a function that addEvent can then attach to keyup.

Alternatively, you could also just use:

function makeHandler() {
    console.log(this.value); // 'this' will be the field that the event occurred on
}

and then use:

addEvent('keyup', els[i], makeHandler);

Side-note

I noticed a slight error in your code:

else { // No much to do    
    elem[evnt] = func;       
}

I think you really want to set elem["on" + evnt] instead.

edited Mar 10 '14 at 07:00

answered Mar 10 '14 at 06:55

Chris

26,544
5
58
71

Awesome! This is capturing correctly, any ideas why `this.value = this.value;` wont update the value on the field? – Alosyius Mar 10 '14 at 07:02
@Alosyius Can you elaborate a bit more on what you mean by "update the value on the field"? – Chris Mar 10 '14 at 07:03
Trying to update the value of the input so that its changed in the component inspector. The reason is so that the MutationObserver can notice the change – Alosyius Mar 10 '14 at 07:04
@Alosyius [See this](http://stackoverflow.com/questions/12048645/how-do-you-get-a-mutation-observer-to-detect-a-value-change-of-a-textarea). However, you should open a separate question if you want help with the `MutationObserver` issue. – Chris Mar 10 '14 at 07:11

score 2 · Answer 2 · answered Nov 13 '17 at 17:59

I like to embed the script in a function so I can minimize it in my IDE and turn it on and off globally. In other words, give it a name.

attachKeyupListenerToInputElements();
function attachKeyupListenerToInputElements(){
    var inputs = doc.querySelectorAll('input');
    for (var i = 0; i < inputs.length; i += 1) {
        inputs[i].addEventListener("keyup", keyupHandler);
    }

    function keyupHandler() {
        console.log(this.value);
    }
}

score 0 · Answer 3 · answered Mar 10 '14 at 07:10

0

Is this what you are looking for:

<script>
    $(document).ready(function () {
        $("input").keyup(function () {
            alert("keyup");
        });
    });
</script>

answered Mar 10 '14 at 07:10

A J

2,112
15
24

Listen for keyup on all input fields

3 Answers3

Side-note