Knockout event binding for input keypress causes weird behavior

mvvm knockout.js dom-events keypress html-input
Pejman picture Pejman · Apr 20, 2013 · Viewed 16.6k times · Source

Long story short, I want to enable users to hit enter on an input element and certain method in my viewmodel be called. Here is my html input:

<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keypress: $parent.searchKeyboardCmd}">

and here is my method in vm:

searchKeyboardCmd = function (data, event) { if (event.keyCode == 13) searchCmd(); };

everything works fine and searchCmd is called when I hit enter on input, but the problem is that I can type nothing in input, i.e. everything I type into input is ignored. Thank you in advance for your help.

Answer

Andrejs Kuzmins picture Andrejs Kuzmins · Apr 20, 2013

According to KO docs you have to return true from your event handler if you want the default action proceed.

searchKeyboardCmd = function (data, event) {
    if (event.keyCode == 13) searchCmd();
    return true;
};

Related questions

KnockOutJS - Multiple ViewModels in a single View

I'm thinking that my application is getting quite large now, too large to handle each View with a single ViewModel. So I'm wondering how difficult it would be to create multiple ViewModels and load them all into a single View. …

Read More
How to add/insert an item into an ObservableArray at a certain position with Knockout.js

All the knockout examples I have found seem to add a new item to the end of an ObservableArray using something like: viewModel.SomeItems.push(someNewItem); This of course places the item at the end of the array. How to …

Read More
Knockout.js Make every nested object an Observable

I am using Knockout.js as a MVVM library to bind my data to some pages. I'm currently building a library to make REST calls to a web service. My RESTful web service returns a simple structure: { id : 1, details: { name: "…

Read More