Text inputs

Text inputs

• Basics
• Options
• Methods
• Events

Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.

To collect standard alphanmeric text, use an input with a type="text" attribute. It's important to set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

The text input is displayed like this:

Standard text input types

In jQuery Mobile, you can use existing and new HTML5 input types such as password, email, tel, number, and more. Some type values are rendered differently across browsers — for example, Chrome displays the range input renders as a slider — so we standardize their appearance by dynamically changing their type to text (currently, this applies to range and search). You can configure which input types are degraded to text with the page plugin's options.

Degraded input types

jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.

The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).

You can configure which types are changed via the page plugin's degradeInputs option, which can be manipulated externally via $.mobile.page.prototype.options.degradeInputs, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.

Textareas

For multi-line text inputs, use a textarea element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar.

Set the for attribute of the label to match the ID of the textarea so they are semantically associated, and wrap them in a div with the data-role="fieldcontain" attribute to group them.

<div data-role="fieldcontain">
	<label for="textarea">Textarea:</label>
	<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

The textarea is displayed like this and will grow to fit new lines as you type:

Calling the textinput plugin

This plugin will auto initialize on any page that contains a text input, no need for a data-role attribute in the markup. However, if needed you can directly call the textinput plugin on any selector, just like any jQuery plugin:

$('input').textinput();