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

Commit 2f6ba8a

Browse files
jaspermdegrootjaspermdegroot
committed
Textinput: no option clearBtn for textarea, padding on input instead of wrapper, full width inputs.
1 parent ee66b58 commit 2f6ba8a

File tree

3 files changed

+27
-71
lines changed

3 files changed

+27
-71
lines changed

‎css/structure/jquery.mobile.forms.textinput.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-we
22
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; }
33
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
44
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
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; }
6-
.ui-input-search, div.ui-input-text { padding: 0 30px; margin: .5em 0; background-image: none; position: relative; }
7-
div.ui-input-text { padding-left: 0; }
8-
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text { padding: .4em; }
5+
.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
6+
.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
7+
.ui-input-search { padding: 0 30px; }
8+
div.ui-input-text input.ui-input-text { padding: .4em 30px .4em .4em; }
99
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
1010
.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
1111
.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; }
3535
.ui-hide-label textarea.ui-input-text,
3636
.ui-hide-label .ui-input-search, .ui-hide-label .ui-input-text { width: 100%; }
3737
.ui-input-search input.ui-input-text,
38-
div.ui-input-text input.ui-input-text { width: 98%; /*echos rule from above*/ }
38+
div.ui-input-text input.ui-input-text { width: 100%; /*echos rule from above*/ }
3939
}

‎docs/demos/textinput/index.html‎

Lines changed: 16 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,10 @@ <h3>Mini sized</h3>
9191
</div><!-- /demo-html -->
9292

9393
<div data-demo-html="true">
94-
<label for="textarea-4">Textarea: data-clear-btn="false"</label>
95-
<textarea data-clear-btn="false" data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
94+
<label for="textarea-4">Textarea:</label>
95+
<textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4"></textarea>
9696
</div><!-- /demo-html -->
9797

98-
<div data-demo-html="true">
99-
<label for="textarea-5">Textarea: data-clear-btn="true"</label>
100-
<textarea data-clear-btn="true" data-mini="true" cols="40" rows="8" name="textarea-5" id="textarea-5"></textarea>
101-
</div><!-- /demo-html -->
102-
10398
<h3>Placeholder</h3>
10499

105100
<div data-demo-html="true">
@@ -118,13 +113,8 @@ <h3>Placeholder</h3>
118113
</div><!-- /demo-html -->
119114

120115
<div data-demo-html="true">
121-
<label for="textarea-6">Textarea: data-clear-btn="false"</label>
122-
<textarea data-clear-btn="false" cols="40" rows="8" name="textarea-6" id="textarea-6" placeholder="Placeholder"></textarea>
123-
</div><!-- /demo-html -->
124-
125-
<div data-demo-html="true">
126-
<label for="textarea-7">Textarea: data-clear-btn="true"</label>
127-
<textarea data-clear-btn="true" cols="40" rows="8" name="textarea-7" id="textarea-7" placeholder="Placeholder"></textarea>
116+
<label for="textarea-6">Textarea:</label>
117+
<textarea cols="40" rows="8" name="textarea-6" id="textarea-6" placeholder="Placeholder"></textarea>
128118
</div><!-- /demo-html -->
129119

130120
<h3>Value/Text</h3>
@@ -145,13 +135,8 @@ <h3>Value/Text</h3>
145135
</div><!-- /demo-html -->
146136

147137
<div data-demo-html="true">
148-
<label for="textarea-18">Textarea: data-clear-btn="false"</label>
149-
<textarea data-clear-btn="false" cols="40" rows="8" name="textarea-18" id="textarea-18">Text</textarea>
150-
</div><!-- /demo-html -->
151-
152-
<div data-demo-html="true">
153-
<label for="textarea-19">Textarea: data-clear-btn="true"</label>
154-
<textarea data-clear-btn="true" cols="40" rows="8" name="textarea-19" id="textarea-19">Text</textarea>
138+
<label for="textarea-18">Textarea:</label>
139+
<textarea cols="40" rows="8" name="textarea-18" id="textarea-18">Text</textarea>
155140
</div><!-- /demo-html -->
156141

157142
<h3>Label hidden</h3>
@@ -172,15 +157,10 @@ <h3>Label hidden</h3>
172157
</div><!-- /demo-html -->
173158

174159
<div data-demo-html="true">
175-
<label for="textarea-8" class="ui-hidden-accessible">Textarea: data-clear-btn="false"</label>
176-
<textarea data-clear-btn="false" cols="40" rows="8" name="textarea-8" id="textarea-8"></textarea>
160+
<label for="textarea-8" class="ui-hidden-accessible">Textarea:</label>
161+
<textarea cols="40" rows="8" name="textarea-8" id="textarea-8"></textarea>
177162
</div><!-- /demo-html -->
178163

179-
<div data-demo-html="true">
180-
<label for="textarea-9" class="ui-hidden-accessible">Textarea: data-clear-btn="true"</label>
181-
<textarea data-clear-btn="true" cols="40" rows="8" name="textarea-9" id="textarea-9"></textarea>
182-
</div><!-- /demo-html -->
183-
184164
<h3>Disabled</h3>
185165

186166
<div data-demo-html="true">
@@ -199,15 +179,10 @@ <h3>Disabled</h3>
199179
</div><!-- /demo-html -->
200180

201181
<div data-demo-html="true">
202-
<label for="textarea-10">Textarea: data-clear-btn="false"</label>
203-
<textarea data-clear-btn="false" disabled="disabled" cols="40" rows="8" name="textarea-10" id="textarea-10"></textarea>
182+
<label for="textarea-10">Textarea:</label>
183+
<textarea disabled="disabled" cols="40" rows="8" name="textarea-10" id="textarea-10"></textarea>
204184
</div><!-- /demo-html -->
205185

206-
<div data-demo-html="true">
207-
<label for="textarea-11">Textarea: data-clear-btn="true"</label>
208-
<textarea data-clear-btn="true" disabled="disabled" cols="40" rows="8" name="textarea-11" id="textarea-11"></textarea>
209-
</div><!-- /demo-html -->
210-
211186
<h3>Fieldcontain</h3>
212187

213188
<div data-demo-html="true">
@@ -233,18 +208,11 @@ <h3>Fieldcontain</h3>
233208

234209
<div data-demo-html="true">
235210
<div data-role="fieldcontain">
236-
<label for="textarea-12">Textarea: data-clear-btn="false"</label>
237-
<textarea data-clear-btn="false" cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
211+
<label for="textarea-12">Textarea:</label>
212+
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
238213
</div>
239214
</div><!-- /demo-html -->
240215

241-
<div data-demo-html="true">
242-
<div data-role="fieldcontain">
243-
<label for="textarea-13">Textarea: data-clear-btn="true"</label>
244-
<textarea data-clear-btn="true" cols="40" rows="8" name="textarea-13" id="textarea-13"></textarea>
245-
</div>
246-
</div><!-- /demo-html -->
247-
248216
<h3>Fieldcontain, mini sized</h3>
249217

250218
<div data-demo-html="true">
@@ -270,18 +238,11 @@ <h3>Fieldcontain, mini sized</h3>
270238

271239
<div data-demo-html="true">
272240
<div data-role="fieldcontain">
273-
<label for="textarea-14">Textarea: data-clear-btn="false"</label>
274-
<textarea data-clear-btn="false" data-mini="true" cols="40" rows="8" name="textarea-14" id="textarea-14"></textarea>
241+
<label for="textarea-14">Textarea:</label>
242+
<textarea data-mini="true" cols="40" rows="8" name="textarea-14" id="textarea-14"></textarea>
275243
</div>
276244
</div><!-- /demo-html -->
277245

278-
<div data-demo-html="true">
279-
<div data-role="fieldcontain">
280-
<label for="textarea-15">Textarea: data-clear-btn="true"</label>
281-
<textarea data-clear-btn="true" data-mini="true" cols="40" rows="8" name="textarea-15" id="textarea-15"></textarea>
282-
</div>
283-
</div><!-- /demo-html -->
284-
285246
<h3>Fieldcontain, hide label</h3>
286247

287248
<div data-demo-html="true">
@@ -307,15 +268,8 @@ <h3>Fieldcontain, hide label</h3>
307268

308269
<div data-demo-html="true">
309270
<div data-role="fieldcontain" class="ui-hide-label">
310-
<label for="textarea-16">Textarea: data-clear-btn="false"</label>
311-
<textarea data-clear-btn="false" cols="40" rows="8" name="textarea-16" id="textarea-16"></textarea>
312-
</div>
313-
</div><!-- /demo-html -->
314-
315-
<div data-demo-html="true">
316-
<div data-role="fieldcontain" class="ui-hide-label">
317-
<label for="textarea-17">Textarea: data-clear-btn="true"</label>
318-
<textarea data-clear-btn="true" cols="40" rows="8" name="textarea-17" id="textarea-17"></textarea>
271+
<label for="textarea-16">Textarea:</label>
272+
<textarea cols="40" rows="8" name="textarea-16" id="textarea-16"></textarea>
319273
</div>
320274
</div><!-- /demo-html -->
321275

‎js/widgets/forms/textinput.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ $.widget( "mobile.textinput", $.mobile.widget, {
3333
isSearch = input.is( "[type='search'], :jqmData(type='search')" ),
3434
focusedEl,
3535
clearbtn,
36-
clearBtnText = o.clearSearchButtonText || o.clearBtnText;
36+
clearBtnText = o.clearSearchButtonText || o.clearBtnText,
37+
clearBtnBlacklist = input.is( "textarea" ),
38+
inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist;
3739

3840
function toggleClear() {
3941
setTimeout( function() {
@@ -62,11 +64,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
6264
//"search" and "text" input widgets
6365
if ( isSearch ) {
6466
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();
65-
} else if ( !!o.clearBtn && !isSearch ) {
67+
} else if ( inputNeedsClearBtn ) {
6668
focusedEl = input.wrap( "<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>" ).parent();
6769
}
6870

69-
if( !!o.clearBtn || isSearch ) {
71+
if( inputNeedsClearBtn || isSearch ) {
7072
clearbtn = $( "<a href='#' class='ui-input-clear' title='" + clearBtnText + "'>" + clearBtnText + "</a>" )
7173
.bind( "click", function( event ) {
7274
input
@@ -89,7 +91,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
8991

9092
input.bind( "paste cut keyup focus change blur", toggleClear );
9193
}
92-
else if( !o.clearBtn && !isSearch ) {
94+
else if ( !inputNeedsClearBtn && !isSearch ) {
9395
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
9496
}
9597

0 commit comments

Comments
 (0)