Javascript没有'；t在第一次按键时更新输入值

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

所以我有两个输入字段：长度和宽度。当用户在长度中键入“1”，然后在宽度中键入“2”时，提交按钮应灰显，因为长度比宽度短。如果他们在没有修改宽度字段的情况下在长度中键入“12”，则应验证并使提交按钮可单击

我的代码的问题是该字段的第一个条目没有注册。例如，如果I 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');
        };

    });
});

jQuery（文档）.ready（函数（$）{
$（'input'）。在（'keypress'，函数（e）上{
$（'p.length span'）.html（parseInt（$（“.length字段”）.val（））；
$（'p.width span'）.html（parseInt（$（“.width field”）.val（））；
if（parseInt（$（“.length字段”）.val（））>parseInt（$（“.width字段”）.val（））{
$（'.result'）.html（'L>W'）；
};
if（parseInt（$（“.length字段”）.val（））L'）；
};
});
});

HTML:

长度


宽度

长度为
宽度是

使用keyup事件而不是按键

jQuery（文档）.ready（函数（$）{
$（'input'）。在（'keyup'，函数（e）上{
$（'p.length span'）.html（parseInt（$（“.length字段”）.val（））；
$（'p.width span'）.html（parseInt（$（“.width field”）.val（））；
if（parseInt（$（“.length字段”）.val（））>parseInt（$（“.width字段”）.val（））{
$（'.result'）.html（'L>W'）；
};
if（parseInt（$（“.length字段”）.val（））L'）；
};
});
});

长度


宽度

长度为
宽度是


您可以使用
输入事件：

// ------------ \/
$('input').on('input', function(e) {
  // code...
}

当您在任一输入中输入新值时，将触发此操作

此外，当您使用“输入增量”按钮增加输入时（以及在中粘贴数字时），这也会起作用。按键事件将在值输入文本框之前触发（阻止您读取第一个输入值）

见下例：


$（文档）.ready（函数（$）{
$（'input'）。关于（'input'，函数（e）{
$（'p.length span'）.html（parseInt（$（“.length字段”）.val（））；
$（'p.width span'）.html（parseInt（$（“.width field”）.val（））；
if（parseInt（$（“.length字段”）.val（））>parseInt（$（“.width字段”）.val（））{
$（'.result'）.html（'L>W'）；
};
if（parseInt（$（“.length字段”）.val（））L'）；
};
});
});

长度

宽度

长度为
宽度是

您可以使用
keyup
事件，如果输入为空或存在非数值，还可以使用回退并将值设置为0。请参阅下面的代码


jQuery（文档）.ready（函数（$）{
$（'input'）。在（'keyup'，函数（e）上{
var length=parseInt（$（“.length字段”）.val（））|| 0；
var width=parseInt（$（“.width字段”）.val（））|| 0；
$（'p.length span'）.html（长度）；
$（'p.width span'）.html（宽度）；
如果（长度>宽度）{
$（'.result'）.html（'L>W'）；
};
if（长度<宽度）{
$（'.result'）.html（'W>L'）；
};
});
});


长度


宽度

长度为
宽度是


使用
keyup
而不是
keypress
，因为在
keypress
期间，输入字段仍然为空

此外，您还可以避免使用多个TME，并且一开始只使用一次


jQuery（文档）.ready（函数（$）{
$（'input'）。在（'keyup'，函数（e）上{
让ipLength=parseInt（$（“.length字段”）.val（），10）；
让ipWidth=parseInt（$（“.width字段”）.val（），10）；
$（'p.length span'）.html（ipLength）；
$（'p.width span'）.html（ipWidth）；
ipLength>ipWidth&$（.result”）.html（“L>W”）；
ipLengthL”）；
});
});


长度


宽度

长度为
宽度是


太好了，谢谢。使用keyup而不是keypress的原因是什么？按键时，在将值输入到字段之前，keypress会检查字段。Keyup使其在按键释放时检查字段，并且由于按键时字段被填充，因此它在Keyup上包含一个值，而不是在keypress上。keypress事件发生在输入更改之前。但关键时刻发生在变化之后。因此，按键在下一个屏幕上显示上一个输入，而按键同时显示。如果它帮助您将答案标记为正确，那么它可以帮助其他人使用defaultValue属性将两个字段的初始值设置为0，而不是空，这将导致NaN
// ------------ \/
$('input').on('input', function(e) {
  // code...
}