CODEWITHSUNDEEP
javascripthtmldata-bindingmvvmknockout.js
MaciejLisCK
MaciejLisCK

Reputation: 3964

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

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.

Upvotes: 1

Views: 4088

Answers (2)

Josh
Josh

Reputation: 7602

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>

Upvotes: 1

thescientist
thescientist

Reputation: 2948

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.

Here is a SO post on using onchange in knockout.js, since I have personally never used it myself. KnockoutJS - Updating ViewModel OnChange of textbox value instead of OnBlur Options

Upvotes: 0

Related Questions