我有这两个表示时间范围(秒)的输入字段,我需要这样设置,以便“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();
});
目前防止输入作为一种解决方法,但我希望能够输入一个数字,同时仍然保持不能低于/高于其他字段的限制
我该怎么做?
最佳答案
当它符合您的条件时,您应该调用 preventDefault
以防止它继续(例如)增加值。在这里,我绑定(bind)到 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">
关于javascript - 控制输入数字字段最小/最大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47785567/