有没有办法控制一个数字输入的增量事件，或使两个数字输入一起工作？

Question

我正在开发一个网站，通过要求用户指定预订的开始和结束时间，使用数字输入获取预订的持续时间。我想以一种不让用户选择比启动时间更早的结束时间的方式来限制输入字段，反之亦然。我在JavaScript中成功地做到了这一点，但以这种方式，您需要增加结束时间值，以便能够增加开始时间的值，而且我认为这不是一个好的实践。例如，如果第一个字段的值为8，并且限制为小于第二个字段的值( 9 )，则只要不增加第二个字段的值，我就无法增加第一个数字输入的值。

所以，我想控制第一个输入字段的增量事件(或者它称为什么)，这样我也可以增加第二个输入字段的值，当第一个输入字段的值与第二个输入字段的值完全相等时。我知道这种类型的输入字段还没有太多的支持，但是有什么方法吗？

max = parseInt(endtime.value, 10) - 1;
min = parseInt(starttime.value, 10) + 1;
starttime.setAttribute('max', max);
endtime.setAttribute('min', min);

这是限制两个数字输入字段的JavaScript代码。但不幸的是，我无法编写任何代码，在增加第一个字段时增加第二个字段的值，或者在降低第二个字段值时降低第一个字段的值。当我按下数字输入字段的向上/向下箭头时，我找不到任何关于事件触发的示例或信息。

Answer 1

有点凌乱:-)而且很有可能是可以改进的，但是要做好(如果我完全理解这个问题)。增加了基本的验证，但是可以用任何东西代替。

<input id="start" min="0" max="23" class="txt" type="number" value="0"/>
<input id="end" min="0" max="23" class="txt" type="number" value="1"/>

jQuery

$('.txt').keyup(function(){
    checkit($(this));
}).change(function(){
    checkit($(this));
});

function checkit(el){
    var txt = el.val(),
        el2 = $('.txt').not(el),
        txt2 = el2.val(),
        id   = el.attr('id');
    if(!$.isNumeric(txt)){
        el.val(0);
        return checkit(el);
    }
    var t  = parseInt(txt),
        t2 = parseInt(txt2);
    if(t > 23 || t < 0) {
        el.val(0);
        return checkit(el); 
    }
    var c  = (id == 'end') ? 
             (t <= t2 ? (t <= 0 ? 0 : 
             (t <= 0 ? 1 : t-1)) : t2) : 
             (t >= t2 ? (t >= 23 ? 23 : 
             (t >= 23 ? 22 : t+1)) : t2),
         s = ((c == 0 && id == 'end' && t == 0) ? 1 : 
             ((c == 23 && id == 'start' && t == 23) ? 22 : t));

    el.val(s);
    el2.val(c);
}

JSFiddle

JSFiddle (扩展，w/引导)