javascript - jquery mobile 函数 on.change 仅有时有效

Question

我在 jsfiddle 中有这段代码，这段代码应该检查无效的数值，如 -12-12。所以如果我输入一个无效的数值(例如-12-11)就会出现错误，它会删除输入(这是预期的行为)并且奇怪的部分是它第二次没有调用 document.on 更改函数.

重现问题的步骤如下:

• 例如输入 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);
    }
});

Answer 1

我看到了你的问题，并且能够解决它。我建议您使用 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">