控制輸入​​數字字段的最小值/最大值

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">