Is it possible in Knockout to have a "live" binding between a text area and a DIV on the page that updates the DIV every time the content of the textarea changes (character per character)? I am using a puted field on my view model, but it won't update the DIV unless I tab off the textarea: Is it possible to update it instantly every time a change is made, without having to tab off?

Code

function EditModel() {
        this.CommentTextPlain = ko.observable("");

        var self = this;

        this.CommentReady = koputed(function () {
            return self.CommentTextPlain().replace(regex, "<BR>");
        });
    }

    function ApplyViewmodel() {
        model = new EditModel();
        ko.applyBindings(model, document.getElementById("mainContainer"));
    }

<div id="mainContainer">
    <div id="target" data-bind='html: CommentReady' class="mentEditBox"></div> 

    <textarea data-bind="value: CommentTextPlain" rows="20" cols="62" id="editBoxFull">    </textarea>

</div>

Is it possible in Knockout to have a "live" binding between a text area and a DIV on the page that updates the DIV every time the content of the textarea changes (character per character)? I am using a puted field on my view model, but it won't update the DIV unless I tab off the textarea: Is it possible to update it instantly every time a change is made, without having to tab off?

Code

function EditModel() {
        this.CommentTextPlain = ko.observable("");

        var self = this;

        this.CommentReady = ko.puted(function () {
            return self.CommentTextPlain().replace(regex, "<BR>");
        });
    }

    function ApplyViewmodel() {
        model = new EditModel();
        ko.applyBindings(model, document.getElementById("mainContainer"));
    }

<div id="mainContainer">
    <div id="target" data-bind='html: CommentReady' class="mentEditBox"></div> 

    <textarea data-bind="value: CommentTextPlain" rows="20" cols="62" id="editBoxFull">    </textarea>

</div>

• javascript
• asp
• knockout.js

Share Follow asked Mar 7, 2013 at 18:59 TGHTGH 39.3k1212 gold badges105105 silver badges140140 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The value binding has a panion option called valueUpdate that you can set to include additional events like:

data-bind="value: CommentTextPlain, valueUpdate: 'afterkeydown'"

use valueUpdate binding

see Additional Parameters section on http://knockoutjs./documentation/value-binding.html

valueUpdate

If your binding also includes a parameter called valueUpdate, this defines additional browser events KO should use to detect changes besides the change event. The following string values are the most monly useful choices:

• "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.

Of these options, "afterkeydown" is the best choice if you want to keep your view model updated in real-time

Knockout has a textInput binding that achieves immediate model updates without having to use additional parameters to the value binding, while also handling cut-and-paste and text drag events.

Here's the link to the textInput binding documentation: http://knockoutjs./documentation/textinput-binding.html.