Knockout event binding for input keypress causes weird behavior
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;
};
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}"
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());