More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

More in this section

Form elements

• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
diff --git a/docs/forms/plugin-eventsmethods.html b/docs/forms/plugin-eventsmethods.html index f5e597c08bf..e2024d415cc 100755 --- a/docs/forms/plugin-eventsmethods.html +++ b/docs/forms/plugin-eventsmethods.html @@ -190,7 +190,7 @@

More in this section

• Form elements
• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
@@ -216,4 +216,3 @@

More in this section

- \ No newline at end of file diff --git a/docs/forms/selects/events.html b/docs/forms/selects/events.html index c6055b544b2..9778c5c1846 100644 --- a/docs/forms/selects/events.html +++ b/docs/forms/selects/events.html @@ -72,7 +72,7 @@

More in this section

• Form elements
• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
diff --git a/docs/forms/selects/index.html b/docs/forms/selects/index.html index 35bcec24918..70bde0374de 100644 --- a/docs/forms/selects/index.html +++ b/docs/forms/selects/index.html @@ -458,7 +458,7 @@

More in this section

• Form elements
• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
diff --git a/docs/forms/selects/methods.html b/docs/forms/selects/methods.html index b5fde5140ea..b7eb7a59aa0 100644 --- a/docs/forms/selects/methods.html +++ b/docs/forms/selects/methods.html @@ -94,7 +94,7 @@

More in this section

• Form elements
• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
diff --git a/docs/forms/selects/options.html b/docs/forms/selects/options.html index 5f22cb04843..e40ac641846 100644 --- a/docs/forms/selects/options.html +++ b/docs/forms/selects/options.html @@ -110,7 +110,7 @@

More in this section

• Form elements
• Form basics
• Form element gallery
-
• Text inputs
+
• Text inputs
• Search inputs
• Slider
• Flip toggle switch
diff --git a/docs/forms/texts/events.html b/docs/forms/texts/events.html new file mode 100644 index 00000000000..090a2455338 --- /dev/null +++ b/docs/forms/texts/events.html @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + +
+ +
+
Text inputs
+ Home +
+ +
+
+ +
+ +
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) { ... }
+});		
+			
+
+ +
+ +
+
+ +
+ +
+ +
More in this section
+ +
+ +
• Form elements
+
• Form basics
+
• Form element gallery
+
• Text inputs
+
• Search inputs
+
• Slider
+
• Flip toggle switch
+
• Radio buttons
+
• Checkboxes
+
• Select menus
+
• Theming forms
+
• Native form elements
+
• Submitting forms
+
• Plugin methods
+ +
+
+
+ +
+ +
+
© 2011 The jQuery Project
+
+ +
+ + + + diff --git a/docs/forms/forms-text.html b/docs/forms/texts/forms-text.html similarity index 100% rename from docs/forms/forms-text.html rename to docs/forms/texts/forms-text.html diff --git a/docs/forms/texts/index.html b/docs/forms/texts/index.html new file mode 100755 index 00000000000..5f84e369591 --- /dev/null +++ b/docs/forms/texts/index.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + +
+ +
+
Text inputs
+ Home +
+ +
+
+ +
+ +
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:
+
+ Text Input: + +
+ + + +
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:
+
+ Password Input: + +
+ + +
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.
+ +
+ Number: + +
+ +
+ Email: + +
+ +
+ Url: + +
+ +
+ Tel: + +
+ + +
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:
+
+ Textarea: + +
+ + + +
+ +
+ +
+ +
+ +
More in this section
+ +
+ +
• Form elements
+
• Form basics
+
• Form element gallery
+
• Text inputs
+
• Search inputs
+
• Slider
+
• Flip toggle switch
+
• Radio buttons
+
• Checkboxes
+
• Select menus
+
• Theming forms
+
• Native form elements
+
• Submitting forms
+
• Plugin methods
+ +
+
+
+ +
+ +
+
© 2011 The jQuery Project
+
+ +
+ + + diff --git a/docs/forms/texts/methods.html b/docs/forms/texts/methods.html new file mode 100644 index 00000000000..58310964d23 --- /dev/null +++ b/docs/forms/texts/methods.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + +
+ +
+
Text inputs
+ Home +
+ +
+
+ +
+ +
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');			
+				
+
+ +
+ +
+
+ +
+ +
+ +
More in this section
+ +
+ +
• Form elements
+
• Form basics
+
• Form element gallery
+
• Text inputs
+
• Search inputs
+
• Slider
+
• Flip toggle switch
+
• Radio buttons
+
• Checkboxes
+
• Select menus
+
• Theming forms
+
• Native form elements
+
• Submitting forms
+
• Plugin methods
+ +
+
+
+ +
+ +
+
© 2011 The jQuery Project
+
+ +
+ + + + diff --git a/docs/forms/texts/options.html b/docs/forms/texts/options.html new file mode 100644 index 00000000000..c44cac5a897 --- /dev/null +++ b/docs/forms/texts/options.html @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + +
+ +
+
Text inputs
+ Home +
+ +
+
+ +
+ +
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" });
+
+ +
+ +
+
+ +
+ +
+ +
More in this section
+ +
+ +
• Form elements
+
• Form basics
+
• Form element gallery
+
• Text inputs
+
• Search inputs
+
• Slider
+
• Flip toggle switch
+
• Radio buttons
+
• Checkboxes
+
• Select menus
+
• Theming forms
+
• Native form elements
+
• Submitting forms
+
• Plugin methods
+ +
+
+
+ +
+ +
+
© 2011 The jQuery Project
+
+ +
+ + + +