Permalink
Browse files

Textinput: no option clearBtn for textarea, padding on input instead …

…of wrapper, full width inputs.
  • Loading branch information...
1 parent ee66b58 commit 2f6ba8ad2067a7bd86c1bcf98c2ba248336fb7b3 @jaspermdegroot jaspermdegroot committed Nov 20, 2012
Showing with 27 additions and 71 deletions.
  1. +5 −5 css/structure/jquery.mobile.forms.textinput.css
  2. +16 −62 docs/demos/textinput/index.html
  3. +6 −4 js/widgets/forms/textinput.js
@@ -2,10 +2,10 @@ label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-we
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-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: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
-.ui-input-search, div.ui-input-text { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
-div.ui-input-text { padding-left: 0; }
-div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text { padding: .4em; }
+.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,
@@ -35,5 +35,5 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search, .ui-hide-label .ui-input-text { width: 100%; }
.ui-input-search input.ui-input-text,
- div.ui-input-text input.ui-input-text { width: 98%; /*echos rule from above*/ }
+ div.ui-input-text input.ui-input-text { width: 100%; /*echos rule from above*/ }
}
@@ -91,15 +91,10 @@
</div><!-- /demo-html -->
<div data-demo-html="true">
- <label for="textarea-4">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
+ <label for="textarea-4">Textarea:</label>
+ <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
</div><!-- /demo-html -->
- <div data-demo-html="true">
- <label for="textarea-5">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" data-mini="true" cols="40" rows="8" name="textarea-5" id="textarea-5"></textarea>
- </div><!-- /demo-html -->
-
<h3>Placeholder</h3>
<div data-demo-html="true">
@@ -118,13 +113,8 @@
</div><!-- /demo-html -->
<div data-demo-html="true">
- <label for="textarea-6">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-6" id="textarea-6" placeholder="Placeholder"></textarea>
- </div><!-- /demo-html -->
-
- <div data-demo-html="true">
- <label for="textarea-7">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-7" id="textarea-7" placeholder="Placeholder"></textarea>
+ <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>
@@ -145,13 +135,8 @@
</div><!-- /demo-html -->
<div data-demo-html="true">
- <label for="textarea-18">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-18" id="textarea-18">Text</textarea>
- </div><!-- /demo-html -->
-
- <div data-demo-html="true">
- <label for="textarea-19">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-19" id="textarea-19">Text</textarea>
+ <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>
@@ -172,15 +157,10 @@
</div><!-- /demo-html -->
<div data-demo-html="true">
- <label for="textarea-8" class="ui-hidden-accessible">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-8" id="textarea-8"></textarea>
+ <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 -->
- <div data-demo-html="true">
- <label for="textarea-9" class="ui-hidden-accessible">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-9" id="textarea-9"></textarea>
- </div><!-- /demo-html -->
-
<h3>Disabled</h3>
<div data-demo-html="true">
@@ -199,15 +179,10 @@
</div><!-- /demo-html -->
<div data-demo-html="true">
- <label for="textarea-10">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" disabled="disabled" cols="40" rows="8" name="textarea-10" id="textarea-10"></textarea>
+ <label for="textarea-10">Textarea:</label>
+ <textarea disabled="disabled" cols="40" rows="8" name="textarea-10" id="textarea-10"></textarea>
</div><!-- /demo-html -->
- <div data-demo-html="true">
- <label for="textarea-11">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" disabled="disabled" cols="40" rows="8" name="textarea-11" id="textarea-11"></textarea>
- </div><!-- /demo-html -->
-
<h3>Fieldcontain</h3>
<div data-demo-html="true">
@@ -233,18 +208,11 @@
<div data-demo-html="true">
<div data-role="fieldcontain">
- <label for="textarea-12">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
+ <label for="textarea-12">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div><!-- /demo-html -->
- <div data-demo-html="true">
- <div data-role="fieldcontain">
- <label for="textarea-13">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-13" id="textarea-13"></textarea>
- </div>
- </div><!-- /demo-html -->
-
<h3>Fieldcontain, mini sized</h3>
<div data-demo-html="true">
@@ -270,18 +238,11 @@
<div data-demo-html="true">
<div data-role="fieldcontain">
- <label for="textarea-14">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" data-mini="true" cols="40" rows="8" name="textarea-14" id="textarea-14"></textarea>
+ <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 -->
- <div data-demo-html="true">
- <div data-role="fieldcontain">
- <label for="textarea-15">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" data-mini="true" cols="40" rows="8" name="textarea-15" id="textarea-15"></textarea>
- </div>
- </div><!-- /demo-html -->
-
<h3>Fieldcontain, hide label</h3>
<div data-demo-html="true">
@@ -307,15 +268,8 @@
<div data-demo-html="true">
<div data-role="fieldcontain" class="ui-hide-label">
- <label for="textarea-16">Textarea: data-clear-btn="false"</label>
- <textarea data-clear-btn="false" cols="40" rows="8" name="textarea-16" id="textarea-16"></textarea>
- </div>
- </div><!-- /demo-html -->
-
- <div data-demo-html="true">
- <div data-role="fieldcontain" class="ui-hide-label">
- <label for="textarea-17">Textarea: data-clear-btn="true"</label>
- <textarea data-clear-btn="true" cols="40" rows="8" name="textarea-17" id="textarea-17"></textarea>
+ <label for="textarea-16">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea-16" id="textarea-16"></textarea>
</div>
</div><!-- /demo-html -->
@@ -33,7 +33,9 @@ $.widget( "mobile.textinput", $.mobile.widget, {
isSearch = input.is( "[type='search'], :jqmData(type='search')" ),
focusedEl,
clearbtn,
- clearBtnText = o.clearSearchButtonText || o.clearBtnText;
+ clearBtnText = o.clearSearchButtonText || o.clearBtnText,
+ clearBtnBlacklist = input.is( "textarea" ),
+ inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist;
function toggleClear() {
setTimeout( function() {
@@ -62,11 +64,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
//"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();
- } else if ( !!o.clearBtn && !isSearch ) {
+ } 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( !!o.clearBtn || isSearch ) {
+ if( inputNeedsClearBtn || isSearch ) {
clearbtn = $( "<a href='#' class='ui-input-clear' title='" + clearBtnText + "'>" + clearBtnText + "</a>" )
.bind( "click", function( event ) {
input
@@ -89,7 +91,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input.bind( "paste cut keyup focus change blur", toggleClear );
}
- else if( !o.clearBtn && !isSearch ) {
+ else if ( !inputNeedsClearBtn && !isSearch ) {
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
}

0 comments on commit 2f6ba8a

Please sign in to comment.