knockout.js event that tracks every text change inside a input text box

You can use valueUpdate: 'afterkeydown' which updates your view model as soon as the user begins typing a character.

data-bind="value: targetProp, valueUpdate: 'afterkeydown'"

Or you can use textInput binding from the latest KO 3.2

<input data-bind="textInput: userName" />

Apart from live updates, it correctly handles cut/paste, dragging, autocomplete.

You can also subscribe to the changes manually.

Make sure the targetProp is an observable, and when building the parent, subscribe manually to the changes :

parent.targetProp = ko.observable(originalValue);

parent.targetProp.subscribe(function(newValue) {
    alert("The new value is " + newValue);
});

Edit: for an option binding:

<select data-bind="options: myObservableArray, value: selectedValue"></select>

in js:

self.selectedValue = ko.observable();

then:

self.selectedValue.subscribe(function(newValue) {
    alert("The new value is " + newValue);
});

Related