Onkeypress更新输入落后1步

Question

I am trying to update an input with 2 other inputs. For example

Amount : (user inputs value)

Fee: (value is already set -- disabled value: 0.0002)

Total: (amount - fee) worked out via javascript below

$('#amount').keypress(function() {
var total = $('#amount').val() - $('#fee').val();
if(typeof total != 'undefined'){ $('#total').val(total) }});

When I 'keypress' on my input with a number, it is one step behind updating the input with total.

Say for an example if I type 1 in the input amount, the total will be -0.0002(the fee) when I press 1 again, it will be 0.9998 (even though the amount input is now 11 so on so forth.)

Answer 1

It's cause of you're using keypress which consists of 2 events keydown and keyup , so your function launches on the first one - keydown , so you get your values, as you said "one step behind", cause when the keydown event is fired your input field didn't recieve the pressed key value yet. Use keyup and you will get your result:

$('#amount').keyup(function() {
    var total = $('#amount').val() - $('#fee').val();
    if(typeof total != 'undefined') $('#total').val(total) 
});

Fiddle

Answer 2

True, because when function is called the field is not updated with the value

The event is called in this steps

• Keydown
• Keypress
• updateview
• Keypress
• updateview
• keyup

So if you can change this event to keyup then you will get the latest value.

Answer 3

The posted answers are good answers, but the best event to use here is the oninput event, because it's faster.

$('#amount').on('input', function() {
    var total = $('#amount').val() - $('#fee').val();

    if(typeof total != 'undefined'){
        $('#total').val(total);
    }
});

Supported by all browsers: browser support . It's actually better supported than onchange and other events like onkeyup . You can compare that on https://caniuse.com/ .

You can even use this event for other input elements as well. Like checkboxes, radio buttons and the select element.

It's fast. So you can combine this with search queries to make your search results return faster.

Please note: since this is not a keyboard event, there won't be a keyCode or any other keyboard related value in the event.

---

Read more

• Event Reference
• Global Event Handler