3. Giving Forms the Knockout Touch | KnockoutJS Web Development

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 character by character as we type but there...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

KnockoutJS Web Development

By : John Farrar

KnockoutJS Web Development

By: John Farrar

Overview of this book

The textInput binding

KnockoutJS Web Development

By : John Farrar

KnockoutJS Web Development

By: John Farrar

Overview of this book

The textInput binding

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access