javascript - 计算按键事件(或仅在按键事件中的数字)

Question

我尝试计算折扣并只允许折扣字段中的数字。当我使用 keyup 事件时，计算是正确的，但我仍然可以输入任何字符，如果我使用 keypress 事件，对字符的限制有效但计算不再有效(不记录第一个输入)。

这是我的代码的代码笔:http://codepen.io/mbrillaud/pen/jEzBGy?editors=101

$(document).ready(function(){
    var $discount = $('#discount'),
        $price = $('#price'),
        $newPrice = $('#new-price');


    $discount.on('keypress', function(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){
            return false;
        }
    $newPrice.val(
        Math.round(
            ($price.val() - (($discount.val() / 100) * $price.val()))* 100) / 100
        );
    });
});

我使用了 stackoverflow 的答案来检查数字。

预先感谢您的帮助

Answer 1

您可以结合使用 keypress 和 keyup 事件来实现此目的。使用 keypress 来防止不需要的字符，并使用 keyup 进行实际计算。

您还必须使用 e.stopImmediatePropagation() 来确保即使输入了无效字符，keyup 也不会继续计算:

$discount.on('keypress', function(e)
{
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){
        e.stopImmediatePropagation();
        return false;
    }
}
.on('keyup change', function(e)
{
    $newPrice.val(Math.round(($price.val() - (this.value / 100) * $price.val()))* 100) / 100);
});

我也冒昧地 Hook 了一个change事件，所以当你删除字符时总数会更新(使用backspace 或delete 键)也是如此。

查看更新 Codepen