KnockoutJS - Updating ViewModel OnChange of textbox value instead of OnBlur Options

Question

I'm pretty new to KnockoutJS and I love what I've seen so far. Currently, when an observable property of the View Model is bound to the text property of the text box (input type=text), the ViewModel gets updated only on the blur event of the textbox. Is there a way to update the View Model on the change event of the textbox? I tried creating a custom binding handler on wiring up the change event handler on the text box in the "init", but it somehow did not work. Is this the correct to achieve this goal? Or is there an easier way?

Answer 1

You can also use a 'value' binding and add the valueUpdate binding attribute to specify when to update your control:

See here: http://knockoutjs.com/documentation/value-binding.html

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /></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>

Answer 2

Above is not work while copy paste from mouse so you need to pass events in valueUpdate. like..

<p>Your value: <input data-bind="value: someValue, valueUpdate:['afterkeydown','propertychange','input']" /></p>

Try here http://jsfiddle.net/uJCQq/4/

Answer 3

According to the official Knockout.js documentation:

Getting value updates instantly from inputs: If you are trying to bind an or to get instant updates to your viewmodel, use the textInput binding. It has better support for browser edge cases than any combination of valueUpdate options.