# The textInput binding

The `textInput` binding links a text box (`<input>`) or text area (`<textarea>`) with a viewmodel property, providing two-way updates between the viewmodel property and the element's value. Unlike the `value` binding, `textInput` provides instant updates from the DOM for all types of user input, including autocomplete, drag-and-drop, and clipboard events.

## Example

    <p>Login name: <input data-bind="textInput: userName" /></p>
    <p>Password: <input type="password" data-bind="textInput: userPassword" /></p>

    ViewModel:
    <pre data-bind="text: fw.toJSON($root, null, 2)"></pre>

    fw.applyBindings({
      userName: fw.observable(""),        // Initially blank
      userPassword: fw.observable("abc")  // Prepopulate
    });

## Parameters

- Main Parameter: Footwork sets the element's text content to your parameter value. Any previous value will be overwritten.

  - If this parameter is an observable value, the binding will update the element's value whenever the observable value changes. If the parameter isn't observable, it will only set the element's value once and will not update it again later.

  - If you supply something other than a number or a string (e.g., you pass an object or an array), the displayed text will be equivalent to `yourParameter.toString()` (that's usually not very useful, so it's best to supply string or numeric values).

  - Whenever the user edits the value in the associated form control, Footwork will update the property on your view model. Footwork will always attempt to update your view model when the value has been modified by the user or any DOM events.

- Additional parameters

  - None

## `textInput` vs `value` binding

Although the `value` binding can also perform two-way binding between text boxes and viewmodel properties, you should prefer `textInput` whenever you want immediate live updates. The main differences are:

- Immediate updates

  `value`, by default, only updates your model when the user moves focus out of the text box. `textInput` updates your model immediately on each keystroke or other text entry mechanism (such as cutting or dragging text, which don't necessarily raise any focus change events).

- Browser event quirks handling

  Browsers are highly inconsistent in the events that fire in response to unusual text entry mechanisms such as cutting, dragging, or accepting autocomplete suggestions. The `value` binding, even with extra options such as `valueUpdate: afterkeydown` to get updates on particular events, does not cover all text entry scenarios on all browsers.

  The `textInput` binding is specifically designed to handle a wide range of browser quirks, to provide consistent and immediate model updates even in response to unusual text entry methods.

Don't try to use the `value` and `textInput` bindings together on the same element, as that won't achieve anything useful.