<body>
<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>
From the documentation
Additional parameters
valueUpdate
If your binding also includes a parameter called valueUpdate, this
defines which browser event KO should use to detect changes. The
following string values are the most commonly useful choices:
“change” (default) – updates your view model when the user
moves the focus to a different control, or in the case of
elements, immediately after any change“keyup” – updates your view model when the user releases a key
“keypress” – updates your view model when the user has typed a
key. Unlike keyup, this updates repeatedly while the user holds a key
down- “afterkeydown” – updates your view model as soon as the user
begins typing a character. This works by catching the browser’s
keydown event and handling the event asynchronously.Of these options, “afterkeydown” is the best choice if you want to
keep your view model updated in real-time.