按键事件的计算(或仅按键事件中的数字）

Calculation on keypress event (or number only in keyup event)

本文关键字：事件 数字 计算      更新时间：2023-12-31

我试图计算折扣，并且只允许在折扣字段中使用数字。当我使用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的答案来核对数字。

提前感谢您的帮助

您可以组合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事件，因此当您删除字符时（使用退格或deletekey），总数也会更新。

请参阅更新的Codepen

像这样使用两个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);
        }

这里有一个简单的例子，效果很好！

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

相关文章：