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. View the data- attribute reference to see all the possible attributes you can add to text inputs.
To collect standard alphanumeric text, use an input with a type="text" attribute. Set the for attribute of the label to match the id of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
This will produce a basic text input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.
For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" data-mini="true" />
This will produce an input that is not as tall as the standard version and has a smaller text size.
To add a clear button to any input (like the search input), add the data-clear-btn="true" attribute. The text for this clear button can be customized via the data-clear-btn-text="clear input" attribute. Search buttons have the clear button by default and cannot be controlled by this option. Note that this is available for all the input types below except for textareas.
<label for="clear-demo">Text Input:</label>
<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true" />
This markup creates a text input with a clear button that becomes visible as soon as a character has been entered.
Optionally wrap the text input in a container with the data-role="fieldcontain" attribute to help visually group it in a longer form.
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
The text input is now displayed like this:
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 renders the range input as a slider. jQuery Mobile standardizes the appearance of range and search by dynamically changing their type to text. You can configure which input types are degraded to text with the page plugin's options.
One major advantage of using these more specific input types if that on mobile devices, specialized keyboards or pickers that speed data entry are offered in place of the standard text keyboard. Support for each input type will vary greatly across platforms, but these generally fall back to a basic text input if not understood.
Each of these inputs has the optional clear button, but browsers may not show the buttons in certain types.
File inputs have limited styling options on most platforms due to security concerns. As of version 1.3, we will automatically apply standard theming to file inputs. In testing, we've found that while the button to select a file cannot be styled, the input that surrounds the button seems to get the theme colors, corners and dimensions in most modern browsers.
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.
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
This will produce a basic textarea with the width set to 100% of the parent container and the label stacked on a separate line. The textarea will grow to fit new lines as you type:
<textarea name="textarea" id="textarea"></textarea>
The textarea is displayed like this and will grow to fit new lines as you type:
This plugin will auto initialize on any page that contains a textarea or any of the text input types listed above without any 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:
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.
Copyright 2013 The jQuery Foundation