Knockout event binding for input keypress causes weird behavior - mvvm

Question

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 1

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;
};

Answer 2

here's a fiddle which demonstrates what ur trying to do and also replace event 'keypress' in ur code with keyup and remove $parent with only the function name unless the textfield is inside a knockout foreach loop..here is the below modified code
<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keyup: searchKeyboardCmd}"

Answer 3

Here is a working sample.
http://jsfiddle.net/tlarson/qG6yv/
<!-- ko with: stuff -->
<input id="searchBox" class="input-xxlarge" type="text"
data-bind="value: searchText, valueUpdate: 'afterkeydown',
event: { keypress: $parent.searchKeyboardCmd}">
<!-- /ko -->
And the javascript:
var stuffvm = function(){
var self = this;
self.searchText = ko.observable();
};
var vm = function() {
var self = this;
self.stuff = new stuffvm();
self.searchCmd = function() {
console.log("search triggered");
};
self.searchKeyboardCmd = function (data, event) {
if (event.keyCode == 13) {
self.searchCmd();
}
return true;
}
}
ko.applyBindings(new vm());