有什么方法可以控制数字输入的增量事件，或者让两个数字输入一起工作吗？

Question

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

所以，我想控制第一个输入字段的递增事件（或它的任何名称），以便当第一个输入字段的值正好等于 [第二个值 - 1] 时，我也可以增加第二个输入字段的值。我知道目前还没有太多支持这种类型的输入字段，但是，有什么办法可以做到这一点吗？

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

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

Answer 1

有点乱 :-) 并且很可能可以改进，但是做这个工作（如果我很好地理解这个问题）。添加了基本验证，但可以替换为任何内容。

HTML:

<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 (extended, w/bootstrap)

有什么方法可以控制数字输入的增量事件，或者让两个数字输入一起工作吗？

Is there any way to control a number input's increment event, or make two number inputs work together?

html

javascript

jquery

input