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);
});

我冒昧地为change事件挂钩，因此当您删除字符时（使用 backspace 或 delete 键，总数将会更新））以及。

查看更新的Codepen

Answer 2

像这样使用keyup keypress。

$discount.on('keyup keypress', function(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){
            e.stopImmediatePropagation();
            return false;
        }

但我想在您的代码中，您也会禁用用户不喜欢的delete, left, right, backspace。

这是一个更加用户友好的功能，允许number, left, right, backspace, delete。

function validateQty(event) {
    var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
 || event.keyCode == 37 || event.keyCode == 39) {
    return true;
}
else if ( key < 48 || key > 57 ) {
    return false;
}
else return true;
};

使用它，做，

$discount.on('keyup keypress', function(e) {
        e.stopImmediatePropagation();
        return validateQty(e);
        }

Answer 3

这是一个效果很好的简单示例！

Html代码：

Qty:<input type='text' name='qty' id='qty' value='' /> <br/>
Price:<input type='text' name='price' id='price' /> <br/>
Total:<input type='text' name='total' id='total' /> <br/>

脚本：

$('#qty, #price').on('input', function () {
    var qty = parseInt($('#qty').val());
    var price = parseFloat($('#price').val());
    $('#total').val((qty * price ? qty * price : 0).toFixed(2));
});

在此测试：DEMO

计算keypress事件（或仅在keyup事件中的数字）

3 个答案: