控制输入​​数字字段的最小值/最大值

Question

我有这两个输入字段，它们代表一个时间范围（秒），我需要使其成为“ from / min”字段不能高于“ to / max”，反之亦然。

到目前为止，我得到了：

 jQuery(document).ready(function(){ jQuery('#from').on( 'input', function( ) { if( parseInt( jQuery('#from').val() ) >= parseInt( jQuery('#to').val() ) ) jQuery('#from').val( parseInt( jQuery('#from').val() ) - 1 ); }); jQuery('#to').on( 'input', function( ) { if( parseInt( jQuery('#to').val() ) <= parseInt( jQuery('#from').val() ) ) jQuery('#to').val( parseInt( jQuery('#to').val() ) + 1 ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> From: <input type="number" min="10" step="1" id="from" value="60"><br /> To: <input type="number" min="11" step="1" id="to" value="120"> 

使用字段或键盘箭头时，它可以正常工作，但我仍然可以在其上键入任何数字/ + /-，并且比其他字段低/高。

我在用：

jQuery('#from, #to').on( 'keypress', function( e ) {
    e.preventDefault();
});

以防止目前输入文字作为解决方法，但我希望能够输入数字，同时仍能保持不能比其他字段低/高的限制

我怎样才能做到这一点？

Answer 1

当其符合您的条件时，应调用preventDefault ，以防止其保持（例如）增加值。 在这里，我绑定到jQuery自定义input事件，而不是使其也监听paste事件。

 jQuery(function ($) { $('#from').on('input', function (e) { var from = parseInt($(this).val(), 10) var to = parseInt($('#to').val(), 10) if (from >= to) { e.preventDefault() $(this).val(to -1) } }) $('#to').on('input', function (e) { var from = parseInt($('#from').val(), 10) var to = parseInt($(this).val(), 10) if (to <= from) { e.preventDefault() $(this).val(from + 1) } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> From: <input type="number" min="10" step="1" id="from" value="60"><br /> To: <input type="number" min="11" step="1" id="to" value="120">