Question

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

所以，我想控制第一个输入字段的增量事件（或者它所调用的任何事件），所以我也可以增加第二个输入字段的值，当第一个的值与[second的值-1]完全相等时。我知道这种类型的输入字段还没有太多支持，但是，有没有办法做到这一点？

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

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

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)

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

1 个答案: