alexgrenn,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
function cost(run, end) {
var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)]
run = (new Date()).setHours(run[0], run[1],0,0);
end = (new Date()).setHours(end[0], end[1],0,0);
run > lunch[0] && (lunch[0]=run);
end < lunch[1] && (lunch[1]=end);
if(run > lunch[1]||end < lunch[0]||run > end) return 0;
return (lunch[1] - lunch[0])/60000 ;
};
document.addEventListener("input", function(event) {
var el = event.target;
if (el.classList.contains('time')) {
var inp = document.querySelectorAll('.time');
if (inp[0].value.length != 5 || inp[1].value.length != 5) return ;
var run = inp[0].value.split(':'),
end = inp[1].value.split(':');
inp[2].value = cost(run, end)
}
});
</script>
</head>
<body>
<input type="text" class="time">
<input type="text" class="time">
<input type="text" class="time">
</body>
</html>