Text inputs

+
• Basics
+
• Options
+
• Methods
+
• Events
+

Since the native text inputs and textareas are used as a proxy for the custom text inputs, you can watch for events on the original, native text input and textareas instead of needing to go through the text input plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.

 
+$( ".selector" ).bind( "change", function(event, ui) {
+  ...
+});
+

The text input plugin has the following custom events:

+ +

create triggered when a text input is created

+

+

This event is used to find out when a custom text input was created. It is not used to create a custom text input. The text input create event can be used like this:

+ +

+$( ".selector" ).textinput({
+   create: function(event, ui) { ... }
+});		
+			

+

+ +

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.

Text inputs

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:

Password inputs

For password fields, use an input with a type="password" attribute. 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="password">Password Input:</label>
+    <input type="password" name="password" id="password" value="" />
+</div>	
+

The password input is displayed like this:

More standard HTML5 input types

In jQuery Mobile, you can use new HTML5 input types such as email, tel, number, and more. We actively degrade certain types to type=text (currently, range and search) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the page plugin's options.

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 which is very hard to use on a mobile device.

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="textarea">Textarea:</label>
+	<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+</div>
+

The textarea is displayed like this and will grow as you type:

Text inputs

+
• Basics
+
• Options
+
• Methods
+
• Events
+

The text input plugin has the following methods:

+ +

enable enable a disabled text input.

+

+

+$('select').selectmenu('enable');			
+				

+

+ +

disable disable a text input.

+

+

+$('select').selectmenu('disable');			
+				

+

+ +

Text inputs

+
• Basics
+
• Options
+
• Methods
+
• Events
+

The text input plugin has the following options:

+ +

theme string

+

+

default: null, inherited from parent

+

Sets the theme swatch color scheme for the text input element. This is a single letter from a-z that maps to the swatches included in your theme. By default, a text input will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: data-theme="a"

+

$('.selector').textinput({ theme: "a" });

+

+ +