Search code examples
javascriptjqueryjquery-eventsonkeyup

Catch multiple onkeyup events from same text input


I'm creating some logic for dom scripting and end up finding the problem where I needed to execute multiple methods when pressing a key. It seems the last onkeyup defined is the one which executes, here's some code:

First method:

...var elements=$$('[id^='+table+']&[id$='+tableField+']');

elements.each(function filter(item) {
    
    //for each item 
    item.onkeyup = function() { ...

Second method:

...//for each referenced input    
for(var i=0, fields=htmlFieldElems.length;i<fields;i++){

   //set keyup event for involved fiels in the expression
   $(htmlFieldElems[i]).onkeyup = function() {...
        

It might happen that the input element might be the same in both methods and both need to execute when something changes... so what's the best way to deal with this?


Solution

  • in pure javascript, you can just call multiple methods from your onkeyup event handler, like this ...

    item.onkeyup = function() {
        func1();
        func2();
        funcn();
    }
    

    if you are using a framework such as jQuery, you can just keep adding events, like this:

    $('#item').keyup(func1);
    $('#item').keyup(func2);
    $('#item').keyup(funcn);
    

    Prototype:

    $('foo').observe('keyup', function(event) {
        func1();
        func2();
        funcn();
    });