Update observable bound to input value only on enter key press

Question

I've got a text field that is bound to an observable:

<input type="text" data-bind="value: chartOptions.zoomLevel" value="100%" />

This works fine, except that the field needs to lose focus before the observable is updated. What I need is to update that the observable only changes when the enter key is pressed.

I've looked at the possible valueUpdate parameters, but none of them seem to be suitable.

just realised you wanted enter key press rather than any key press, but I'll leave my answer there for the time being in case it's useful. Here's a solution: http://stackoverflow.com/questions/11628789/binding-keypress-event-on-knockoutjs-observable-not-populated — Tanner, Oct 22 '14 at 15:12
See http://stackoverflow.com/questions/23087721/call-function-on-enter-key-press-knockout-js — JBeagle, Oct 22 '14 at 16:20

score 1 · Accepted Answer · answered Oct 22 '14 at 18:50

There's probably a way to do this with custom bindings, but here's a straightforward way to do it using the event binding. You seem to imply that the observable should only change iif the enter key is pressed. However, I've added the blur event as a trigger too; it's easy to remove that anyhow.

var ViewModel = function() {
  var self = this;
  
  self.zoomLevel = ko.observable('100');
  self.newZoomLevel = ko.observable('100');
  
  self.tryCommitZoomLevel = function(data, event) {
    if (event.keyCode === 13 || event.type === "blur") {
      self.zoomLevel(event.target.value);
    }
    
    // Make sure the event bubbles to let the value binding also handle events:
    return true;
  };
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="event: { keypress: tryCommitZoomLevel, blur: tryCommitZoomLevel }, value: newZoomLevel" />
<br />
The zoom level you've entered is: <strong data-bind="text: zoomLevel"></strong>%

The snippet keeps a seperate "new value" copy of the actual observable, and only commits it if the user presses enter or the input looses focus.

score 0 · Answer 2 · answered Jul 04 '18 at 10:56

Here's a polyfill that may help - forces IE to fire 'change' event on enter key (as other browsers do) which in turn triggers Knockout's value binding.

var isIE = !!document.documentMode;
if (isIE) {

    $("body").on("keydown", "input[type='text']", function (e) {

        // Ensure 'value' binding is fired on enter in IE
        if ((e.keyCode || e.which) === 13) {
            $(this).blur();
        }
    });
}

Update observable bound to input value only on enter key press

2 Answers2