Update knockout.js view-model immediately after textbox value changes

Question

How to make knockout.js update view-model immediately after text input value changes? The problem is that update triggers only when field loose focus.

From knockout.js documentation:

"afterkeydown" is the best choice if you want to keep your view model updated in real-time.

I don't found this helpful. In my system I have field called user token. Therefore users often paste token using mouse.

So how to make knockout.js updates it's model immediately for every text change in text field.

at the very least, it would have to get focused in order for them to paste the token in right? So maybe have a focus event handler run as a backup. Or else there is always just onchange — thescientist
agreed, once pasted and tab out/lose focus onchange or using jquerys change() function would be more suitable than checking for each key entry — user1166905

Josh Josh · Accepted Answer · 2014-06-09T12:40:44

As you alluded to in your question, this is controlled by the valueUpdate binding.

input is the recommended value for this, if you only need to support "modern browsers." "Non-modern browers" basically means IE8 and earlier. From the docs:

Of [all the valueUpdate] options, input is the best choice if you want to keep your view model updated in real-time, and you only need to support reasonably modern browsers such as IE 9+ (whereas "afterkeydown" is a good choice for older browsers). For example:

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'input'" /></p>
<p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->

<script type="text/javascript">
    var viewModel = {
        someValue: ko.observable("edit me")
    };
</script>

Update knockout.js view-model immediately after textbox value changes

2 Answers