{"id":132,"date":"2023-08-25T17:32:49","date_gmt":"2023-08-25T17:32:49","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=132"},"modified":"2023-08-25T17:32:49","modified_gmt":"2023-08-25T17:32:49","slug":"textinput","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/textinput\/","title":{"rendered":"Textinput Widget"},"content":{"rendered":"<article id=\"textinput1\" class=\"entry widget\"><h2 class=\"section-title\">\n<span>Textinput Widget<\/span><span class=\"version-details\">version added: 1.0<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Creates a textinput widget for textinput, textarea or search input<\/p>\n<section id=\"quick-nav\"><header><h2>QuickNav<a href=\"#entry-examples\">Examples<\/a>\n<\/h2><\/header><div class=\"quick-nav-section\">\n<h3>Options<\/h3>\n<div><a href=\"#option-clearBtn\">clearBtn<\/a><\/div>\n<div><a href=\"#option-clearBtnText\">clearBtnText<\/a><\/div>\n<div><a href=\"#option-disabled\">disabled<\/a><\/div>\n<div><a href=\"#option-initSelector\">initSelector<\/a><\/div>\n<div><a href=\"#option-mini\">mini<\/a><\/div>\n<div><a href=\"#option-preventFocusZoom\">preventFocusZoom<\/a><\/div>\n<div><a href=\"#option-theme\">theme<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Methods<\/h3>\n<div><a href=\"#method-disable\">disable<\/a><\/div>\n<div><a href=\"#method-enable\">enable<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Events<\/h3>\n<div><a href=\"#event-create\">create<\/a><\/div>\n<\/div><\/section><div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<h2>Text Input<\/h2>\n\n\t\t<p>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 <a href=\"..\/data-attribute\/\">data- attribute reference<\/a> to see all the possible attributes you can add to text inputs.<\/p>\n\n\t\t<p>To collect standard alphanumeric text, use an <code>input<\/code> with a <code>type=&quot;text&quot;<\/code> attribute. Set the <code>for<\/code> attribute of the <code>label<\/code> to match the <code>id<\/code> of the <code>input<\/code> so they are semantically associated. It&apos;s possible to accessibly hide the label if it&apos;s not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span>&gt;<\/span>Text Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<p>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.\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example1.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Mini version<\/h3>\n\n\t\t<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini=&quot;true&quot;<\/code> attribute to the element to create a mini version.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span>&gt;<\/span>Text Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>This will produce an input that is not as tall as the standard version and has a smaller text size.\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example2.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Clear button option<\/h3>\n\n\t\t<p>To add a clear button to any input (like the search input), add the <code>data-clear-btn=&quot;true&quot;<\/code> attribute. The text for this clear button can be customized via the <code>data-clear-btn-text=&quot;clear input&quot;<\/code> 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 <code>textareas<\/code>.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;clear-demo&quot;<\/span>&gt;<\/span>Text Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;clear&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;clear-demo&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> <span class=\"hljs-attr\">data-clear-btn<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>This markup creates a text input with a clear button that becomes visible as soon as a character has been entered.\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example7.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Field containers<\/h3>\n\n\t\t<p>Optionally wrap the text input in a container with the <code>data-role=&quot;fieldcontain&quot;<\/code> attribute to help visually group it in a longer form.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;fieldcontain&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span>&gt;<\/span>Text Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>The text input is now displayed like this:\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example3.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n        <h3>More text input types<\/h3>\n\t\t<p>In jQuery Mobile, you can use existing and new HTML5 input types such as <code>password<\/code>, <code>email<\/code>, <code>tel<\/code>, <code>number<\/code>, and more.  Some type values are rendered differently across browsers. For example, Chrome renders the <code>range<\/code> input as a slider. jQuery Mobile standardizes the appearance of <code>range<\/code> and <code>search<\/code> by dynamically changing their type to <code>text<\/code>. You can configure which input types are degraded to <code>text<\/code> with the <code>page<\/code> plugin&apos;s options.<\/p>\n\n\t\t<p>One major advantage of using these more specific input types if that on mobile devices, specialized keyboards that speed data entry are offered in place of the standard text keyboard. Try the following inputs on a mobile device to see which display custom keyboards on various platforms.\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example4.html\" style=\"width:100%;height:710px;border:0px\"><\/iframe><\/p>\n\n        <h2>Textareas<\/h2>\n\n\t\t<p>For multi-line text inputs, use a <code>textarea<\/code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar. <\/p>\n\t\t<p>Set the <code>for<\/code> attribute of the <code>label<\/code> to match the <code>id<\/code> of the <code>textarea<\/code> so they are semantically associated, and wrap them in a <code>div<\/code> with the <code>data-role=&quot;fieldcontain&quot;<\/code> attribute to group them.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;textarea-a&quot;<\/span>&gt;<\/span>Textarea:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;textarea&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;textarea-a&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>I&apos;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.<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>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:\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example5.html\" style=\"width:100%;height:190px;border:0px\"><\/iframe><\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;fieldcontain&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;textarea&quot;<\/span>&gt;<\/span>Textarea:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;textarea&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;textarea&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>The textarea is displayed like this and will grow to fit new lines as you type:\n\t\t<iframe src=\"\/1.3\/resources\/textinput\/example6.html\" style=\"width:100%;height:190px;border:0px\"><\/iframe><\/p>\n\n        <h3>Calling the textinput plugin<\/h3>\n\n\t\t<p>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 <code>data-role<\/code> attribute in the markup. However, if needed, you can directly call the <code>textinput<\/code> plugin on any selector, just like any jQuery plugin:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;input&quot;<\/span> ).textinput();<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>Degraded input types<\/h3>\n\n\t\t<p>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 themeable search input styling.<\/p>\n\t\t<p>The page plugin contains a list of input types that are set to either true which means they&apos;ll degrade to type=text, false which means they&apos;ll be left alone, or a string such as &quot;number&quot;, which means they&apos;ll be converted to that type (such as the case of type=range).<\/p>\n\n\t\t<p>You can configure which types are changed via the page plugin&apos;s <code>degradeInputs<\/code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs<\/code>, which has properties: color, date, datetime, &quot;datetime-local&quot;, email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit<\/code> event, so that it applies to the first page as well as subsequent pages that are loaded.<\/p>\n\n\t\t<h2>Search Input<\/h2>\n\t\t<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds an &quot;x&quot; icon to clear the field once you start typing. Start with an input with a type=&quot;search&quot; attribute in your markup.<\/p>\n\t\t<p>Set the <code>for<\/code> attribute of the <code>label<\/code> to match the <code>id<\/code> of the <code>input<\/code> so they are semantically associated. It&apos;s possible to accessibly hide the label if it&apos;s not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;search-basic&quot;<\/span>&gt;<\/span>Search Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;search-basic&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.\n\t\t<iframe src=\"\/1.3\/resources\/search-input\/example1.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Mini version<\/h3>\n\n\t\t<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini=&quot;true&quot;<\/code> attribute to the element to create a mini version.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;search-mini&quot;<\/span>&gt;<\/span>Search Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;search-mini&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;search-mini&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>\/&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>This will produce a search input that is not as tall as the standard version and has a smaller text size.\n\t\t<iframe src=\"\/1.3\/resources\/search-input\/example2.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Field containers<\/h3>\n\n\t\t<p>Optionally wrap the search input in a container with the <code>data-role=&quot;fieldcontain&quot;<\/code> attribute to help visually group it in a longer form.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;fieldcontain&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;search-2&quot;<\/span>&gt;<\/span>Search Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;search-2&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;search-2&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>The search input is now displayed like this:\n\t\t<iframe src=\"\/1.3\/resources\/search-input\/example3.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n\t\t<h3>Theming<\/h3>\n\t\t<p>The <code>data-theme<\/code> attribute can be added to the search input to set the theme to any swatch letter.\n\t\t<iframe src=\"\/1.3\/resources\/search-input\/example4.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n\t\t<h3>Setting the clear button text<\/h3>\n\n\t\t<p>The text for the button used to clear the search input of text can be configured for all search inputs by binding to the <code>mobileinit<\/code> event and setting the\n\t\t<code>$.mobile.textinput.prototype.options.clearSearchButtonText<\/code> property to a string of your choosing.<\/p>\n\n\t\t<h3>Calling the textinput plugin<\/h3>\n\n\t\t<p>This plugin will auto-initialize on any page that contains a text input with the <code>type=&quot;search&quot;<\/code> attribute without any need for a <code>data-role<\/code> attribute in the markup. However, if needed, you can directly call the <code>textinput<\/code> plugin on a selector, just like any jQuery plugin:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.mySearchInput&quot;<\/span> ).textinput();<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t<\/div>\n<section id=\"options\"><header><h2>Options<\/h2><\/header><div id=\"option-clearBtn\" class=\"api-item first-item\">\n<h3>clearBtn&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>Adds a clear button to the input (not available for textareas).\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-clear-btn=&quot;true&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>clearBtn<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">clearBtn<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>clearBtn<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> clearBtn = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;clearBtn&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;clearBtn&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-clearBtnText\" class=\"api-item\">\n<h3>clearBtnText&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;clear text&quot;<\/code>\n<\/div>\n<div>The text description for the optional clear button, useful for assistive technologies like screen readers.\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-clear-btn-text=&quot;Clear input&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>clearBtnText<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">clearBtnText<\/span>: <span class=\"hljs-string\">&quot;Clear value&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>clearBtnText<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> clearBtnText = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;clearBtnText&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;clearBtnText&quot;<\/span>, <span class=\"hljs-string\">&quot;Clear value&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-disabled\" class=\"api-item\">\n<h3>disabled&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>Sets the default state of the text input to disabled when &quot;true&quot;.\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>disabled<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">disabled<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>disabled<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> disabled = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-initSelector\" class=\"api-item\">\n<h3>initSelector&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#CSS%20selector%20string\">CSS selector string<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>input[type=&apos;text&apos;], input[type=&apos;search&apos;], :jqmData(type=&apos;search&apos;), input[type=&apos;number&apos;], :jqmData(type=&apos;number&apos;), input[type=&apos;password&apos;], input[type=&apos;email&apos;], input[type=&apos;url&apos;], input[type=&apos;tel&apos;], textarea, input:not([type])<\/code>\n<\/div>\n<div>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the mobileinit event:\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;mobileinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $.mobile.textinput.prototype.options.initSelector = <span class=\"hljs-string\">&quot;.myInputs&quot;<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-mini\" class=\"api-item\">\n<h3>mini&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>Sets the size of the element to a more compact, mini version.\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>mini<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">mini<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>mini<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> mini = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;mini&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;mini&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-preventFocusZoom\" class=\"api-item\">\n<h3>preventFocusZoom&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>true on iOS platforms<\/code>\n<\/div>\n<div>This option disables page zoom temporarily when a custom input is focused, which prevents iOS devices from zooming the page into the input. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts.\n\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-prevent-focus-zoom=&quot;true&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>preventFocusZoom<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">preventFocusZoom<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>preventFocusZoom<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> preventFocusZoom = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;preventFocusZoom&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;preventFocusZoom&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-theme\" class=\"api-item\">\n<h3>theme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null, inherited from parent<\/code>\n<\/div>\n<div>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.\n\n\t\t\t\t<p>Possible values: swatch letter (a-z).<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the <code>theme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">theme<\/span>: <span class=\"hljs-string\">&quot;a&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>theme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> theme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;theme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;theme&quot;<\/span>, <span class=\"hljs-string\">&quot;a&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section><section id=\"methods\"><header><h2>Methods<\/h2><\/header><div id=\"method-disable\"><div class=\"api-item first-item\">\n<h3>disable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>disable a text input.\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the disable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;disable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-enable\"><div class=\"api-item\">\n<h3>enable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>enable a disabled text input.\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the enable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput( <span class=\"hljs-string\">&quot;enable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/section><section id=\"events\"><header><h2>Events<\/h2><\/header><div id=\"event-create\" class=\"api-item first-item\">\n<h3>create()<span class=\"returns\">Type: <code>textinputcreate<\/code><\/span>\n<\/h3>\n<div>triggered when a text input is created\n\t\t\t\t<argument name=\"event\" type=\"Event\">\n\t\t\t\t<desc><\/desc>\n\t\t\t<\/argument>\n\t\t\t<argument name=\"ui\" type=\"Object\">\n\t\t\t\t<desc><\/desc>\n\t\t\t<\/argument>\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the textinput with the create callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).textinput({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the textinputcreate event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;textinputcreate&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/section><section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>A basic example of a search input field<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;viewport&quot;<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">&quot;width=device-width, initial-scale=1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>textinput demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.9.1.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;page&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;page1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;header&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>jQuery Mobile Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span>&gt;<\/span>Text Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;name&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;basic&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span>  \/&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1\">\n<p>A basic example of a search input field<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;viewport&quot;<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">&quot;width=device-width, initial-scale=1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>textinput demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.9.1.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;page&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;page1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;header&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>jQuery Mobile Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;search-basic&quot;<\/span>&gt;<\/span>Search Input:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;search-basic&quot;<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">&quot;&quot;<\/span> \/&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Creates a textinput widget for textinput, textarea or search input<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/132\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}