当用户清除字段时检测

JS - Detect when a user clears a field

本文关键字：检测 字段 清除 用户      更新时间：2023-09-26

我正在为我当前的web项目创建一个计算器，它工作得很好，但当我玩它时，它引起了我的注意，清除第三个字段导致脚本输出NaN。

我对Javascript相当陌生，我尝试做

 if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
     $('#result1').text('')
 }

但这并不能解决问题。我一直在寻找解决这个问题的方法，但好像互联网上没有人遇到过这样的问题!如果任何一个输入被清除，我需要能够清除输出(#result1)。

这是我的完整代码:

 $(document).ready(function(){
     $('#field11').keyup(function(){
         if($('#field12').val() != '' && $('#field13').val() != ''){
        $('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
        }
     });
        $('#field12').keyup(function(){
        if($('#field11').val() != '' && $('#field13').val() != ''){
        $('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
        }
     }); 
     $('#field13').keyup(function(){
         if($('#field11').val() != '' && $('#field12').val() != ''){
        $('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
         }
     });
     if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
         $('#result1').text('')
     }
});
以下是JSFiddle的工作代码:https://jsfiddle.net/x7a91bnx/

谢谢!

您可以使用DRY原则来改进您的逻辑。由于所有keyup处理程序都执行相同的逻辑，您可以将其提取到自己的函数中。然后在该函数中，您可以检索每个字段的值，如果字段为空，则将其设置为0。你也可以在计算前检查#field13是否有一个值，以避免除零问题。还要注意，commafy()函数也可以简化。

试试这个:

$(document).ready(function () {
    $('#field11, #field12, #field13').keyup(calculate);
});
function commafy(num) {
    return num.toString().replace(/'B(?=('d{3})+(?!'d))/g, ".");
}
function calculate() {
    var field11 = parseFloat($('#field11').val()) || 0;
    var field12 = parseFloat($('#field12').val()) || 0;
    var field13 = parseFloat($('#field13').val()) || 0;
    var result = field13 == 0 ? 0 : commafy(Math.round(field11 + field12 / field13 * 1.5)) + ",99";
    $('#result1').text(result);
}

更新小提琴

您检查每个输入的直觉是正确的，但是您必须在每次计算发生之前检查它，而不仅仅是在加载文档之后检查一次。在例子:

$('#field13').keyup(function () {
    if ($('#field11').val() !== '' || $('#field12').val() !== '' || $('#field13').val() !== '') {
        $('#result1').text(commafy(Math.round(parseFloat($('#field11').val()) + parseFloat($('#field12').val()) / parseFloat($('#field13').val()) * 1.5)) + ",99");
    } else {
        $('#result1').text('');
    }
});
相关文章：