jquery移动功能on.change只在某些时候起作用

jquery mobile function on.change works only sometimes

本文关键字：起作用 移动 功能 on change jquery      更新时间：2023-09-26

我在jsfiddle中有这个代码，这个代码应该检查无效的数值，比如-12-12。因此，如果我键入一个无效的数值（例如-12-11），就会出现错误，它会删除输入（这是预期的行为），而奇怪的是，第二次它没有调用document.on change函数。

重现问题的步骤如下：

  • 例如，键入12。

  • 单击其他位置（如其他文本框），该数字将为
    转换为十进制（12.00）

  • 键入一个错误的数字，如-12-12，然后单击其他位置文本框将被清除（这是预期的行为）

  • 第二次在文本框中键入该数字时，它不会更改值或清除文本框。

    这是我不理解的，当你第二次插入错误的数字时，我试图调试代码，但函数没有被调用，所以我想知道为什么。

感谢您的帮助。

我的javascript代码：

$(document).on('change', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});

我看到了你的问题，并且能够解决它。我建议你使用blur事件，而不是textbox的change事件。这会很有魅力。

这是代码：

$(document).on('blur', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="transaction_amount">Amount</label>
                <input type="number" data-mini="true" step="0.01" name="amount" min="0.01" max="1000000" id="transaction_amount" value="">
                <label for="transaction_external_identifier" id="payment-description-label">Check #</label>
                <input type="text" name="external_identifier" id="transaction_external_identifier" value="" data-mini="true">

当在数字类型输入中输入一个无效数字时，浏览器会将其视为空白（因为它是无效的，而且不需要保存该值，所以当被问及有效性时会返回false。根据Mozilla开发者网络的说法）。因此，如果再次键入-12-12，change事件不会激发，因此不会清除，因为基础值仍然为空。如果你第一次在空白输入中输入-12-12，你会看到这一点——它也不起作用。

您最好的选择是将onchange更改为onblur，因为它不会查看值，因此会更加一致。

相关文章：