Question

我正在研究一个脚本，该脚本将在用户键入时检测一个输入字段是否大于另一个输入字段。

因此，我有两个输入字段：长度和宽度。当用户在长度中键入“ 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>

Answer 1

使用keyup事件代替按键

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>

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

Answer 3

您可以使用keyup事件，也可以使用回退，如果输入为空或没有数字值，则将值设置为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>

Answer 4

使用keyup代替keypress，因为在keypress期间，输入字段仍为空。

此外，您可以避免多次使用parseInt个tme，并且一开始只能使用一次

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>

Javascript不会在第一次按键时更新输入值

4 个答案: