控制输入数字字段 min/max

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

它在使用字段或键盘箭头时工作正常，但我仍然可以在上面输入任何数字/+/-，然后 lower/higher 比其他字段。

我正在使用：

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

目前防止输入作为一种解决方法，但我希望能够输入一个数字，同时仍然保持不能进入 lower/higher 比其他字段

我该怎么做？

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

控制输入数字字段 min/max

Controlling input number field min/max

html

javascript

jquery

range

limit

控制输入​​数字字段 min/max

Controlling input number field min/max

html

javascript

jquery

range

limit

控制输入数字字段 min/max