Skip to content
Browse files

Added file inputs to the auto init so they now receive consistent the…

…me 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.
  • Loading branch information...
1 parent 8bc072f commit be9d25da959b473a55509d0720eb824cecf9eaa7 @toddparker toddparker committed
Showing with 12 additions and 3 deletions.
  1. +10 −1 docs/forms/textinputs/index.html
  2. +1 −1 docs/forms/textinputs/options.html
  3. +1 −1 js/widgets/forms/textinput.js
View
11 docs/forms/textinputs/index.html
@@ -84,7 +84,7 @@
<h2>More text input types</h2>
<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>
- <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>
+ <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>
<div data-role="fieldcontain">
<label for="password">Password:</label>
@@ -151,6 +151,15 @@
<input type="color" name="color" id="color" value="" />
</div>
+
+
+ <h2>File inputs</h2>
+ <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>
+
+ <div data-role="fieldcontain">
+ <label for="file">File:</label>
+ <input type="file" name="file" id="file" value="" />
+ </div>
<h2>Textareas</h2>
View
2 docs/forms/textinputs/options.html
@@ -47,7 +47,7 @@
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
<dd>
- <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>
+ <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>
<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>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.textinput.prototype.options.initSelector = ".myInputs";</strong>
View
2 js/widgets/forms/textinput.js
@@ -14,7 +14,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
theme: null,
// This option defaults to true on iOS devices.
preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
- 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])",
+ 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']",
clearSearchButtonText: "clear text",
disabled: false
},

0 comments on commit be9d25d

Please sign in to comment.
Something went wrong with that request. Please try again.