问题描述
我正在编写一个脚本，该脚本将在用户键入时检测一个输入字段是否大于另一个输入字段。
因此，我有两个输入字段：长度和宽度。 当用户在长度中键入“ 1”，然后在宽度中键入“ 2”时，由于长度小于宽度，因此提交按钮应显示为灰色。 如果他们然后在长度中键入“ 12”而不修改宽度字段，则它应该验证并使提交按钮可单击。
我的代码存在问题，因为该字段的第一个条目未注册。 例如，如果我在console.log中输入字段，则第一次按键被注册为“ NaN”。
到目前为止，我已经完成了我的工作，您可以看到，如果您在其中一个字段中输入数字，则HTML中不会更新。 但是，如果您随后键入另一个数字，则会更早看到字段1的值。
我希望这有道理，并希望有人可以帮助我
使用Javascript：
jQuery(document).ready(function ($) {
$('input').on('keypress', function (e) {
$('p.length span').html(parseInt($(".length-field").val()));
$('p.width span').html(parseInt($(".width-field").val()));
if (parseInt($(".length-field").val()) > parseInt($(".width-field").val())) {
$('.result').html('L > W');
};
if (parseInt($(".length-field").val()) < parseInt($(".width-field").val())) {
$('.result').html('W > L');
};
});
});
HTML：
<p>
Length
</p>
<input type="number" class="length-field">
<p>
Width
</p>
<input type="number" class="width-field">
<p class="length">length is <span></span></p>
<p class="width">width is <span></span></p>
<p class="result"></p>
1楼
使用keyup事件代替keypress
jQuery(document).ready(function($){ $('input').on('keyup', function(e){ $('p.length span').html(parseInt($(".length-field").val())); $('p.width span').html(parseInt($(".width-field").val())); if( parseInt($(".length-field").val()) > parseInt($(".width-field").val()) ){ $('.result').html('L > W'); }; if( parseInt($(".length-field").val()) < parseInt($(".width-field").val()) ){ $('.result').html('W > L'); }; }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>
2楼
您可以使用input事件：
// ------------ \/
$('input').on('input', function(e) {
// code...
}
当您在任一输入中输入新值时，都会触发该事件。
此外，当您使用输入增量按钮增加输入（以及粘贴数字）时，这也将起作用。 在将值输入到文本框中之前，将触发keypress事件（防止您读取第一个输入的值）
请参见下面的示例：
$(document).ready(function($) { $('input').on('input', function(e) { $('p.length span').html(parseInt($(".length-field").val())); $('p.width span').html(parseInt($(".width-field").val())); if (parseInt($(".length-field").val()) > parseInt($(".width-field").val())) { $('.result').html('L > W'); }; if (parseInt($(".length-field").val()) < parseInt($(".width-field").val())) { $('.result').html('W > L'); }; }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Length</p> <input type="number" class="length-field"> <p>Width</p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"></p>
3楼
如果输入为空或不存在数字值，则可以使用keyup事件，也可以使用fallback并将值设置为0。
见下面的代码
jQuery(document).ready(function($){ $('input').on('keyup', function(e){ var length = parseInt($(".length-field").val()) || 0; var width = parseInt($(".width-field").val()) || 0; $('p.length span').html(length); $('p.width span').html(width); if( length > width ){ $('.result').html('L > W'); }; if(length < width ){ $('.result').html('W > L'); }; }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>
4楼
使用keyup而不是keypress因为在keypress期间，输入字段仍为空。
您也可以避免使用parseInt多个tmes，并且一开始只能使用一次
jQuery(document).ready(function($) { $('input').on('keyup', function(e) { let ipLength = parseInt($(".length-field").val(), 10); let ipWidth = parseInt($(".width-field").val(), 10); $('p.length span').html(ipLength); $('p.width span').html(ipWidth); ipLength > ipWidth && $(".result").html("L > W"); ipLength < ipWidth && $(".result").html("W > L"); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> Length </p> <input type="number" class="length-field"> <p> Width </p> <input type="number" class="width-field"> <p class="length">length is <span></span></p> <p class="width">width is <span></span></p> <p class="result"> </p>