Textfield

Edit on GitHub

The Textfield is a small component for adding aria attributes and data binding to a HTML textfield. Typically this will be used in conjunction with a controller (e.g. Textfield Slider, Textfield Stepper) to restrict the values and pair with additional input methods.

Creator

Use the following function to create a Textfield component:

Method fluid.textfield(container, options);
Description

Instantiates the textfield component. Provides data binding between the HTML <input> and the component's model. Also provides options for setting an "aria-label" and/or "aria-labelledby" attribute.
Parameters
container

A CSS-based selectors, single-element jQuery object, or DOM element that identifies HTML <input> to bind the Textfield component to.

options
An optional data structure that configures the Textfield component, as described below.
Returns The Textfield component
Examples 

var textfield = fluid.textfield(".flc-textfield", {
    model: {
        value: "Hello World"
    },
    strings: {
        "label": "Insert Demo Name"
    }
});

Methods

setModel

Method textfield.setModel(event);
Description The setModel method allows for updating the model value based on an event. This is primarily used internally for binding to the input's change event.
Parameters
event
A jQuery event object including a change value. The setModel method will source the change value from event.target.value.

Model Paths

The following model paths can be used with model listeners.

  • model.value: undefined by default but can contain any value that is valid for the input.

Options

strings

Description The strings option allows you to specify strings to be used by the component and is the main location for localization. In particular this is used to set an "aria-label" to the components container element, via the attrs option.
Default Nothing specified by default
Example 

var textfield = fluid.textfield(".flc-textfield", {
    strings: {
        "label": "Insert Demo Name"
    }
});

attrs

Description The attrs option allows you to specify attributes to be added on creation to the components container element. In particular this is used to set aria attributes used by the component, such as "aria-labelledby".
Default Nothing specified by default
Example 

var textfield = fluid.textfield(".flc-textfield", {
    attrs: {
        "aria-labelledby": "elementID"
    }
});