組合兩個輸入事件

我的目標，所以我正在寫一個位的jQuery從輸入刪除javascript組合兩個輸入事件

的JavaScript：

<input type="text" id = "IDthisinput'" class="CLthisinput'" placeholder="First" 
      onChange = "dosomething();" 
      onKeyPress = "this.onchange();" 
      onpaste = "this.onchange();" 
      oninput = "this.onchange();" 
    /> 
    <span id="ReturnedMsg"></span> 
    <span id="IDActionVal"></span>

jquery的：

$('.CLthisinput').on('keyup', function() { 
      $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
      $('#IDActionVal').html('#'+this.id + ' ' + 'keyup ' + $(this).val()); 
    }); 
    $('.CLthisinput').on('paste', function() { 
      $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
      $('#IDActionVal').html('#'+this.id + ' ' + 'keyup ' + $(this).val()); 
    });

對於縮短以上這種工作正常的情況，我感到很難受，像這樣：

$('.CLthisinput').on('keyup', 'paste', function() { 
      var theaction = event 
      $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
      $('#IDActionVal').html('#'+this.id + ' ' + theaction + ' ' + $(this).val()); 
    });

我怎樣才能讓事件一起工作？！

來源

2017-03-11 blind to the onbvious

你看到類名thisinput（在下面的Lumino和Dzmitry的答案中）它應該讀取CLthisinput。該差異源於我原來的帖子中的錯字！ –

枚舉相同的字符串兩個事件，用空格分隔：

$('.thisinput').on('keyup paste', function() { 
     var theaction = event 
     $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
     $('#IDActionVal').html('#'+this.id + ' ' + theaction + ' ' + $(this).val()); 
});

你無法將它們作爲單獨的參數，因爲$('.thisinput').on('keyup', 'paste', ...)做一些完全不同的：它激發當keyup事件中<paste>標籤出現裏面.thisinput（並允許動態添加<paste>標籤）。

您可以使用event.type找出事件的類型：

$('.thisinput').on('keyup paste', function() { 
     var theaction = event 
     $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
     $('#IDActionVal').html('#'+this.id + ' ' + theaction.type + ' ' + $(this).val()); 
});

另外，不要使用全局event對象（也稱爲window.event）。這是微軟推出的non-standard extension，它在Firefox中不起作用。相反，傳遞事件作爲參數傳遞給你的回調：

$('.thisinput').on('keyup paste', function (event) { 
     var theaction = event 
     $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
     $('#IDActionVal').html('#'+this.id + ' ' + theaction.type + ' ' + $(this).val()); 
});

而且，你並不真的需要theaction和event是獨立的變量：

$('.thisinput').on('keyup paste', function (theaction) { 
     $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
     $('#IDActionVal').html('#'+this.id + ' ' + theaction.type + ' ' + $(this).val()); 
});

來源

2017-03-11 22:37:30

謝謝我現在看到它，我添加了一個var theaction，所以我可以確定它是哪個事件，有任何幫助 –

我喜歡它，我也喜歡解決方案和解釋。謝謝。 –

我也喜歡Lumio的回答，如果我沒有在CLass名字中輸入錯別字，我相信這兩個事件會被列在相同的字符串中。歡呼兩條路線。 –

另一種方式也將是該外包函數，如下所示：

var helper = function() { 
    $('#ReturnedMsg').html(dotuff('#'+this.id,$(this).val())); 
    $('#IDActionVal').html('#'+this.id + ' ' + 'keyup ' + $(this).val()); 
} 
$('.CLthisinput').on('keyup', helper); 
$('.thisinput').on('paste', helper);

來源

2017-03-11 22:42:12 lumio

我喜歡這個和Dzmitry的回答。由於增加了解釋，接受這個答案。但很高興看到兩個可行的選擇。謝謝。 –

組合兩個輸入事件

回答

相關問題