The textInput binding

We have obviously done a number of bindings to textboxes already. Now, we are going to do something new with them. We are going to put a text input and a text area on the page together. Here is our HTML markup, where we will put in a new file called text.html:

<p>Title: <input data-bind="textInput: title" /></p>
<p>Post: <textarea data-bind="textInput: post" /></textarea></p>
<p>
<h2 data-bind="text: title"></h2>
<div data-bind="text: post"></div>
</p>

If we were using the value binding we would only get an update when the input element lost focus. Using the textInput binding let us have character by character feedback. Let's add our code so we can try it out:

<script>
function Blog() {
  this.title = ko.observable();
  this.post = ko.observable();
};
blog = new Blog();
ko.applyBindings( blog );
</script>

We see the page content updating...