Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit be9d25d

Browse files
committed
Added file inputs to the auto init so they now receive consistent theme styling. Fixes #5050
Updated the docs and options pages to reflect this change. Tested in a wide variety of browsers and devices and it's surprisingly consistent.
1 parent 8bc072f commit be9d25d

File tree

3 files changed

+12
-3
lines changed

3 files changed

+12
-3
lines changed

docs/forms/textinputs/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ <h2>Field containers</h2>
8484
<h2>More text input types</h2>
8585
<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's options.</p>
8686

87-
<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.</p>
87+
<p>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.</p>
8888

8989
<div data-role="fieldcontain">
9090
<label for="password">Password:</label>
@@ -151,6 +151,15 @@ <h2>More text input types</h2>
151151
<input type="color" name="color" id="color" value="" />
152152
</div>
153153

154+
155+
156+
<h2>File inputs</h2>
157+
<p>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.</p>
158+
159+
<div data-role="fieldcontain">
160+
<label for="file">File:</label>
161+
<input type="file" name="file" id="file" value="" />
162+
</div>
154163

155164

156165
<h2>Textareas</h2>

docs/forms/textinputs/options.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h2>Text inputs</h2>
4747

4848
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
4949
<dd>
50-
<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</p>
50+
<p class="default">default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='file'], input:not([type])"</p>
5151
<p>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 <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
5252
<pre><code>$( document ).bind( "mobileinit", function(){
5353
<strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>

js/widgets/forms/textinput.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
1414
theme: null,
1515
// This option defaults to true on iOS devices.
1616
preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
17-
initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type])",
17+
initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input[type='color'], input:not([type]), input[type='file']",
1818
clearSearchButtonText: "clear text",
1919
disabled: false
2020
},

0 commit comments

Comments
 (0)