Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'text-input-clear-btn'

  • Loading branch information...
commit d53894148afd65ff55587c1923852ded4541bfae 2 parents 3e34506 + 1c22f1d
@jaspermdegroot jaspermdegroot authored
View
47 css/structure/jquery.mobile.forms.textinput.css
@@ -1,21 +1,23 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; display: block; width: 100%; outline: 0; }
-input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 0; }
-.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text { margin: 0; }
-input.ui-input-text, textarea.ui-input-text, .ui-input-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
+input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
+div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
+.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
+.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
+.ui-input-search { padding: 0 30px; }
+div.ui-input-text input.ui-input-text { padding: .4em 30px .4em .4em; }
+input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
+.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
+.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
+.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
+input.ui-input-text, textarea.ui-input-text, .ui-input-search, div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
-.ui-input-search { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
-.ui-input-search.ui-mini { margin: .25em 0; }
-.ui-field-contain .ui-input-search { margin: 0; }
-.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
-.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
-.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
-.ui-mini .ui-input-clear { right: -3px; }
-
-.ui-input-search .ui-input-clear-hidden { display: none; }
-input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }
+.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
+.ui-input-search .ui-input-clear, .ui-input-text .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
+.ui-mini .ui-input-clear { margin-top: -14px; right: -3px; }
+.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
input:-moz-placeholder { color: #aaa; }
@@ -24,12 +26,15 @@ input:-moz-placeholder { color: #aaa; }
input[type=number]::-webkit-outer-spin-button { margin: 0; }
@media all and (min-width: 28em){
- .ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
- .ui-field-contain input.ui-input-text,
- .ui-field-contain textarea.ui-input-text,
- .ui-field-contain .ui-input-search { width: 78%; display: inline-block; }
- .ui-hide-label input.ui-input-text,
- .ui-hide-label textarea.ui-input-text,
- .ui-hide-label .ui-input-search { width: 100%; }
- .ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
+ .ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
+ .ui-field-contain input.ui-input-text,
+ .ui-field-contain textarea.ui-input-text,
+ .ui-field-contain .ui-input-search,
+ .ui-field-contain div.ui-input-text { width: 78%; display: inline-block; }
+ .ui-hide-label input.ui-input-text,
+ .ui-hide-label textarea.ui-input-text,
+ .ui-hide-label .ui-input-search,
+ .ui-hide-label div.ui-input-text,
+ .ui-input-search input.ui-input-text,
+ div.ui-input-text input.ui-input-text { width: 100%; }
}
View
2  docs/demos/index.html
@@ -41,6 +41,8 @@ <h1 id="jqm-logo"><img src="_assets/img/jquery-logo.png" alt="jQuery Mobile Fram
<li data-role="list-divider">Selects</li>
<li><a href="selects/index.html" data-ajax="false">Selects</a></li>
<li><a href="selects/custom-multiple-selects.html" data-ajax="false">Custom multiple selects</a></li>
+ <li data-role="list-divider">Textinput</li>
+ <li><a href="textinput/index.html" data-ajax="false">Textinput</a></li>
<li data-role="list-divider">Collapsibles</li>
<li><a href="collapsibles/index.html" data-ajax="false">Collapsible</a></li>
<li><a href="collapsibles/collapsible-set.html" data-ajax="false">Collapsible Set</a></li>
View
431 docs/demos/textinput/index.html
@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Textinput - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../../js/jquery.js"></script>
+ <script src="../_assets/js/jqm-demos.js"></script>
+ <script src="../../../js/"></script>
+</head>
+<body>
+<div data-role="page">
+
+ <div data-role="header" data-theme="f">
+ <h1>Textinput</h1>
+ <a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <div class="content-primary">
+
+ <form>
+
+ <h2>Text input, Search & Textarea</h2>
+
+ <h3>Default</h3>
+
+ <div data-demo-html="true">
+ <label for="text-1">Text input: no data- attributes</label>
+ <input type="text" name="text-1" id="text-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-2">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-2" id="text-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-3">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-3" id="text-3" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-1">Search: no data- attributes</label>
+ <input type="search" name="search-1" id="search-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-2">Search: data-clear-btn="false"</label>
+ <input type="search" data-clear-btn="false" name="search-2" id="search-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-3">Search: data-clear-btn="true"</label>
+ <input type="search" data-clear-btn="true" name="search-3" id="search-3" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-1">Textarea: no data- attributes</label>
+ <textarea cols="40" rows="8" name="textarea-1" id="textarea-1"></textarea>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-2">Textarea: data-clear-btn="false"</label>
+ <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-2" id="textarea-2"></textarea>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-3">Textarea: data-clear-btn="true"</label>
+ <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-3" id="textarea-3"></textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Mini sized</h3>
+
+ <div data-demo-html="true">
+ <label for="text-4">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" data-mini="true" name="text-4" id="text-4" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-5">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" data-mini="true" name="text-5" id="text-5" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-4">Search:</label>
+ <input type="search" data-mini="true" name="search-4" id="search-4" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-4">Textarea:</label>
+ <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Placeholder</h3>
+
+ <div data-demo-html="true">
+ <label for="text-6">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-6" id="text-6" value="" placeholder="Placeholder">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-7">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-7" id="text-7" value="" placeholder="Placeholder">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-5">Search:</label>
+ <input type="search" name="search-5" id="search-5" value="" placeholder="Placeholder">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-6">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-6" id="textarea-6" placeholder="Placeholder"></textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Value/Text</h3>
+
+ <div data-demo-html="true">
+ <label for="text-18">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-18" id="text-18" value="Value">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-19">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-19" id="text-19" value="Value">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-11">Search:</label>
+ <input type="search" name="search-11" id="search-11" value="Value">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-18">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-18" id="textarea-18">Text</textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Label hidden</h3>
+
+ <div data-demo-html="true">
+ <label for="text-8" class="ui-hidden-accessible">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-8" id="text-8" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-9" class="ui-hidden-accessible">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-9" id="text-9" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-6" class="ui-hidden-accessible">Search:</label>
+ <input type="search" name="search-6" id="search-6" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-8" class="ui-hidden-accessible">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-8" id="textarea-8"></textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Disabled</h3>
+
+ <div data-demo-html="true">
+ <label for="text-10">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" disabled="disabled" name="text-10" id="text-10" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="text-11">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" disabled="disabled" name="text-11" id="text-11" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="search-7">Search:</label>
+ <input type="search" disabled="disabled" name="search-7" id="search-7" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="textarea-10">Textarea:</label>
+ <textarea disabled="disabled" cols="40" rows="8" name="textarea-10" id="textarea-10"></textarea>
+ </div><!-- /demo-html -->
+
+ <h3>Fieldcontain</h3>
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="text-12">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-12" id="text-12" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="text-13">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-13" id="text-13" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="search-8">Search:</label>
+ <input type="search" name="search-8" id="search-8" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="textarea-12">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
+ </div>
+ </div><!-- /demo-html -->
+
+ <h3>Fieldcontain, mini sized</h3>
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="text-14">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" data-mini="true" name="text-14" id="text-14" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="text-15">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" data-mini="true" name="text-15" id="text-15" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="search-9">Search:</label>
+ <input type="search" data-mini="true" name="search-9" id="search-9" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain">
+ <label for="textarea-14">Textarea:</label>
+ <textarea data-mini="true" cols="40" rows="8" name="textarea-14" id="textarea-14"></textarea>
+ </div>
+ </div><!-- /demo-html -->
+
+ <h3>Fieldcontain, hide label</h3>
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain" class="ui-hide-label">
+ <label for="text-16">Text input: data-clear-btn="false"</label>
+ <input type="text" data-clear-btn="false" name="text-16" id="text-16" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain" class="ui-hide-label">
+ <label for="text-17">Text input: data-clear-btn="true"</label>
+ <input type="text" data-clear-btn="true" name="text-17" id="text-17" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain" class="ui-hide-label">
+ <label for="search-10">Search:</label>
+ <input type="search" name="search-110" id="search-10" value="">
+ </div>
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <div data-role="fieldcontain" class="ui-hide-label">
+ <label for="textarea-16">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-16" id="textarea-16"></textarea>
+ </div>
+ </div><!-- /demo-html -->
+
+ <h3>Various input types</h3>
+
+ <div data-demo-html="true">
+ <label for="number-1">Number: data-clear-btn="false"</label>
+ <input type="number" data-clear-btn="false" name="number-1" id="number-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="number-2">Number: data-clear-btn="true"</label>
+ <input type="number" data-clear-btn="true" name="number-2" id="number-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="number-3">Number + pattern: data-clear-btn="false"</label>
+ <input type="number" data-clear-btn="false" name="number-3" pattern="[0-9]*" id="number-3" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="number-2">Number + pattern: data-clear-btn="true"</label>
+ <input type="number" data-clear-btn="true" name="number-4" pattern="[0-9]*" id="number-4" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="date-1">Date: data-clear-btn="false"</label>
+ <input type="date" data-clear-btn="false" name="date-1" id="date-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="date-2">Date: data-clear-btn="true"</label>
+ <input type="date" data-clear-btn="true" name="date-2" id="date-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="month-1">Month: data-clear-btn="false"</label>
+ <input type="month" data-clear-btn="false" name="month-1" id="month-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="month-2">Month: data-clear-btn="true"</label>
+ <input type="month" data-clear-btn="true" name="month-2" id="month-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="week-1">Week: data-clear-btn="false"</label>
+ <input type="week" data-clear-btn="false" name="week-1" id="week-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="week-2">Week: data-clear-btn="true"</label>
+ <input type="week" data-clear-btn="true" name="week-2" id="week-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="time-1">Time: data-clear-btn="false"</label>
+ <input type="time" data-clear-btn="false" name="time-1" id="time-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="time-2">Time: data-clear-btn="true"</label>
+ <input type="time" data-clear-btn="true" name="time-2" id="time-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="datetime-1">Datetime: data-clear-btn="false"</label>
+ <input type="datetime" data-clear-btn="false" name="datetime-1" id="datetime-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="datetime-2">Datetime: data-clear-btn="true"</label>
+ <input type="datetime" data-clear-btn="true" name="datetime-2" id="datetime-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="datetime-3">Datetime-local: data-clear-btn="false"</label>
+ <input type="datetime-local" data-clear-btn="false" name="datetime-3" id="datetime-3" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="datetime-4">Datetime-local: data-clear-btn="true"</label>
+ <input type="datetime-local" data-clear-btn="true" name="datetime-4" id="datetime-4" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="tel-1">Tel: data-clear-btn="false"</label>
+ <input type="tel" data-clear-btn="false" name="tel-1" id="tel-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="tel-2">Tel: data-clear-btn="true"</label>
+ <input type="tel" data-clear-btn="true" name="tel-2" id="tel-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="email-1">Email: data-clear-btn="false"</label>
+ <input type="email" data-clear-btn="false" name="email-1" id="email-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="email-2">Email: data-clear-btn="true"</label>
+ <input type="email" data-clear-btn="true" name="email-2" id="email-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="url-1">Url: data-clear-btn="false"</label>
+ <input type="url" data-clear-btn="false" name="url-1" id="url-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="url-2">Url: data-clear-btn="true"</label>
+ <input type="url" data-clear-btn="true" name="url-2" id="url-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="file-1">File: data-clear-btn="false"</label>
+ <input type="file" data-clear-btn="false" name="file-1" id="file-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="file-2">File: data-clear-btn="true"</label>
+ <input type="file" data-clear-btn="true" name="file-2" id="file-2" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="password-1">Password: data-clear-btn="false"</label>
+ <input type="password" data-clear-btn="false" name="password-1" id="password-1" value="" autocomplete="off">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="password-2">Password: data-clear-btn="true"</label>
+ <input type="password" data-clear-btn="true" name="password-2" id="password-2" value="" autocomplete="off">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="color-1">Color: data-clear-btn="false"</label>
+ <input type="color" data-clear-btn="false" name="color-1" id="color-1" value="">
+ </div><!-- /demo-html -->
+
+ <div data-demo-html="true">
+ <label for="color-2">Color: data-clear-btn="true"</label>
+ <input type="color" data-clear-btn="true" name="color-2" id="color-2" value="">
+ </div><!-- /demo-html -->
+
+ </form>
+
+ </div><!--/content-primary -->
+
+ </div><!-- /content -->
+
+ <div class="jqm-footer">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div><!-- /jqm-footer -->
+
+</div><!-- /page -->
+</body>
+</html>
View
46 js/widgets/forms/textinput.js
@@ -16,7 +16,9 @@ $.widget( "mobile.textinput", $.mobile.widget, {
// 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]), input[type='file']",
- clearSearchButtonText: "clear text",
+ clearBtn: false,
+ clearSearchButtonText: null, //deprecating for 1.3...
+ clearBtnText: "clear text",
disabled: false
},
@@ -28,7 +30,12 @@ $.widget( "mobile.textinput", $.mobile.widget, {
theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
themeclass = " ui-body-" + theme,
miniclass = o.mini ? " ui-mini" : "",
- focusedEl, clearbtn;
+ isSearch = input.is( "[type='search'], :jqmData(type='search')" ),
+ focusedEl,
+ clearbtn,
+ clearBtnText = o.clearSearchButtonText || o.clearBtnText,
+ clearBtnBlacklist = input.is( "textarea, :jqmData(type='range')" ),
+ inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist;
function toggleClear() {
setTimeout( function() {
@@ -54,13 +61,16 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input[0].setAttribute( "autocomplete", "off" );
}
-
- //"search" input widget
- if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
-
+ //"search" and "text" input widgets
+ if ( isSearch ) {
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
- clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearSearchButtonText + "'>" + o.clearSearchButtonText + "</a>" )
- .bind('click', function( event ) {
+ } else if ( inputNeedsClearBtn ) {
+ focusedEl = input.wrap( "<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>" ).parent();
+ }
+
+ if( inputNeedsClearBtn || isSearch ) {
+ clearbtn = $( "<a href='#' class='ui-input-clear' title='" + clearBtnText + "'>" + clearBtnText + "</a>" )
+ .bind( "click", function( event ) {
input
.val( "" )
.focus()
@@ -79,9 +89,9 @@ $.widget( "mobile.textinput", $.mobile.widget, {
toggleClear();
- input.bind( 'paste cut keyup focus change blur', toggleClear );
-
- } else {
+ input.bind( "paste cut keyup focus change blur", toggleClear );
+ }
+ else if ( !inputNeedsClearBtn && !isSearch ) {
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
}
@@ -125,13 +135,13 @@ $.widget( "mobile.textinput", $.mobile.widget, {
// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
- this._on( $(document), {"pagechange": "_keyup" });
+ this._on( $( document ), { "pagechange": "_keyup" });
// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ( $.trim( input.val() ) ) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
- this._on( $(window), {"load": "_keyup"});
+ this._on( $( window ), {"load": "_keyup"});
}
}
if ( input.attr( "disabled" ) ) {
@@ -140,8 +150,9 @@ $.widget( "mobile.textinput", $.mobile.widget, {
},
disable: function() {
- var $el;
- if ( this.element.attr( "disabled", true ).is( "[type='search'], :jqmData(type='search')" ) ) {
+ var $el,
+ parentNeedsDisabled = this.element.attr( "disabled", true ) && ( this.element.is( "[type='search'], :jqmData(type='search')" ) || ( this.element.is( "[type='text'],textarea" ) && !!this.options.clearBtn ) );
+ if ( parentNeedsDisabled ) {
$el = this.element.parent();
} else {
$el = this.element;
@@ -151,10 +162,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
},
enable: function() {
- var $el;
+ var $el,
+ parentNeedsDisabled = this.element.attr( "disabled", true ) && ( this.element.is( "[type='search'], :jqmData(type='search')" ) || ( this.element.is( "[type='text'],textarea" ) && !!this.options.clearBtn ) );
// TODO using more than one line of code is acceptable ;)
- if ( this.element.attr( "disabled", false ).is( "[type='search'], :jqmData(type='search')" ) ) {
+ if ( parentNeedsDisabled ) {
$el = this.element.parent();
} else {
$el = this.element;
View
6 tests/unit/textinput/index.html
@@ -57,6 +57,12 @@ <h2 id="qunit-userAgent"></h2>
<textarea id="destroycorrectly">Test Value</textarea>
<input type="search" id="search-input">
+
+ <input type="text" id="text-input">
+
+ <input type="text" data-clear-btn="true" id="text-input-clear-btn">
+
+ <textarea data-clear-btn="true" id="textarea-clear-btn"></textarea>
</div>
</body>
</html>
View
2  tests/unit/textinput/settings.js
@@ -1,3 +1,3 @@
$( document ).bind("mobileinit", function(){
- $.mobile.textinput.prototype.options.clearSearchButtonText = "custom value";
+ $.mobile.textinput.prototype.options.clearBtnText = "custom value";
});
View
9 tests/unit/textinput/textinput_core.js
@@ -81,4 +81,13 @@
test( "'clear text' button for search inputs should use configured text", function(){
strictEqual( $( "#search-input" ).closest( ".ui-input-search" ).find( ".ui-input-clear" ).attr( "title" ), "custom value" );
});
+
+ test( "data-clear-btn adds clear button to text inputs", function() {
+ ok( $( '#text-input-clear-btn' ).next().is( 'a.ui-input-clear' ), "data-clear-btn adds clear button to text inputs" );
+ });
+
+ test( "data-clear-btn does not add clear button to textarea", function() {
+ ok( ! $( "#textarea-clear-btn" ).next().is( "a.ui-input-clear" ), "data-clear-btn does not add clear button to textarea" );
+ });
+
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.