ボタンをクリックしないで計算を表示

Question

結果を得るためにボタンをクリックすることなく、計算を出力する（2つの時間入力の違い）があります。ボタンを使って作業していますが、「ライブ」または瞬時に表示できる方法はありますか？

HTML：

<input type="time" id="time1"> 
<br> 
<input type="time" id="time2"> 
<br> 
<button>CLICK</button> 
<br> 
<label>Difference:</label> 
<input type="time" id="difference" disabled> 

のjQuery：

$('button').on('click', function() { 
    var time1 = $('#time1').val(), 
    time2 = $('#time2').val(), 
    hours = time2.split(':')[0] - time1.split(':')[0], 
    minutes = time2.split(':')[1] - time1.split(':')[1]; 

    minutes = minutes.toString().length < 2 ? '0' + minutes : minutes; 
    if (minutes < 0) { 
    hours--; 
    minutes = 60 + minutes; 
    } 
    hours = hours.toString().length < 2 ? '0' + hours : hours; 
    $('#difference').val(hours + ':' + minutes); 
}); 

JSFiddle

おかげ

Answer 1

私は、あなたが探している機能はをリッスンjQueryのからの変更（）、だと思いますセレクタ内の要素：

ここ

https://api.jquery.com/change/

あなたのセレクタと、コードはJSでどのように見えるかです：

$('#time1,#time2').change(function() { 
    console.log('this is to test in console how it changes'); 
    var time1 = $('#time1').val(), 
    time2 = $('#time2').val(), 
    hours = time2.split(':')[0] - time1.split(':')[0], 
    minutes = time2.split(':')[1] - time1.split(':')[1]; 

    minutes = minutes.toString().length < 2 ? '0' + minutes : minutes; 
    if (minutes < 0) { 
    hours--; 
    minutes = 60 + minutes; 
    } 
    hours = hours.toString().length < 2 ? '0' + hours : hours; 
    $('#difference').val(hours + ':' + minutes); 
}); 

（ボタンなし）HTML：考慮して取るために

<input type="time" id="time1"> 
    <br> 
    <input type="time" id="time2"> 
    <br>   
    <label>Difference:</label> 
    <input type="time" id="difference" disabled> 

ことの一つは、ということです変更は入力全体がたとえば午後4時08分になるのを待ちます時間だけを変更すると、それは動作しません、あなたは両方のためにすべての時間を置く必要があり、それはあなたに答えを他の入力ボックスにスローされます。それは、日付/時刻全体が入力されるまで、計算を行うべきではないので、意味があります。

希望すると便利です。

レオ。