javascript - 如何让我的表单字段在用户输入时自动更新？

Question

嗨，我有一个包含多个输入/字段的表单。我使用下面的脚本来查找输入到这些字段中的值的总和，而不是在用户离开字段输入后更新总和值字段，就像用户在字段输入框外部单击时一样。如何让此脚本在用户输入值时自动更新总和显示的字段。

<script>
var $form = $('#contactForm'),
    $summands = $form.find('.sum1'),
    $sumDisplay = $('#itmttl');

$form.delegate('.sum1', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

</script>

Answer 1

您可以使用为任何输入触发的input事件。它对于使用旋转器的新 HTML5 输入 number 也有效。

$('.num1').on("input",function(){
    var sum = 0;
    $.each($summands, function(){
        var n = $(this).val();
        sum = isNaN(n) || n == '' ? sum : sum+parseFloat(n); 
    });
    $('#sum').text(sum);
});

http://jsfiddle.net/6n4kugbp/