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

Clear input button for text inputs #5281

Merged
merged 5 commits into from
Nov 20, 2012
Merged

Clear input button for text inputs #5281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c8c3f9
text input: modified css to add clear button to input type text. Feat…
Nov 13, 2012
eeb69a0
text input: modified text input widget to include clear button on inp…
Nov 13, 2012
b624b6f
text input: modified test to include new text input type. Feature req…
Nov 13, 2012
5a372d4
textinput.js: deprecated clearSearchButtonText, removed duplicate cod…
collinforrester Nov 15, 2012
e1bd316
textinput.css: fixed input inside fieldcontain width, fixed disabled …
collinforrester Nov 15, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions css/structure/jquery.mobile.forms.textinput.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,19 @@ input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini { margin: .25em 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-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-input-text { 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-field-contain .ui-input-search, .ui-field-contain .ui-input-text { 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-input-search input.ui-input-text, .ui-input-text input.ui-input-text, .ui-input-text textarea.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, .ui-input-text .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; }
.ui-input-text { padding: 0; }
.ui-input-text input.ui-input-text, .ui-input-text textarea.ui-input-text { width: 100%; padding: .4em; }


.ui-input-search .ui-input-clear-hidden, .ui-input-text .ui-input-clear-hidden { display: none; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
textarea.ui-mini { height: 45px; }

Expand All @@ -24,12 +28,13 @@ input:-moz-placeholder { color: #aaa; }
input[type=number]::-webkit-outer-spin-button { margin: 0; }

@media all and (min-width: 450px){
.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-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 1% 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 .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 .ui-input-text { width: 100%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}
35 changes: 24 additions & 11 deletions js/widgets/forms/textinput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: "clear text", //deprecating for 1.3...
clearButtonText: clearSearchButtonText || "clear text",
disabled: false
},

Expand Down Expand Up @@ -54,12 +56,21 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input[0].setAttribute( "autocomplete", "off" );
}

var searchNeedsIcon = input.is( "[type='search'],:jqmData(type='search')" ),
searchNeedsClearBtn = searchNeedsIcon && !input.is( ':jqmData(clear-btn="false")' ),
searchNeedsIconNoBtn = searchNeedsIcon && !searchNeedsClearBtn,
textNeedsClearBtn = input.is( "[type='text'],textarea" ) && !!o.clearBtn,
needsClearBtn = textNeedsClearBtn || ( searchNeedsIcon && searchNeedsClearBtn );

//"search" input widget
if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {

//"search" and "text" input widgets
if ( searchNeedsIcon ) {
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>" )
} else if ( textNeedsClearBtn ) {
focusedEl = input.wrap( "<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>" ).parent();
}

if( needsClearBtn ) {
clearbtn = $( "<a href='#' class='ui-input-clear' title='" + o.clearButtonText + "'>" + o.clearButtonText + "</a>" )
.bind('click', function( event ) {
input
.val( "" )
Expand All @@ -80,8 +91,8 @@ $.widget( "mobile.textinput", $.mobile.widget, {
toggleClear();

input.bind( 'paste cut keyup focus change blur', toggleClear );

} else {
}
else if( !searchNeedsIconNoBtn ) { //special case
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
}

Expand Down Expand Up @@ -140,8 +151,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;
Expand All @@ -151,10 +163,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;
Expand Down
4 changes: 4 additions & 0 deletions tests/unit/textinput/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ <h2 id="qunit-userAgent"></h2>
<textarea id="destroycorrectly">Test Value</textarea>

<input type="search" id="search-input">

<input type="text" id="text-input">

<textarea data-clear-btn="true" id="textarea-clear-button"></textarea>
</div>
</body>
</html>
8 changes: 8 additions & 0 deletions tests/unit/textinput/textinput_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,12 @@
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( "inputs [type='text'] have clear text button by default", function() {
ok( $( '#text-input' ).next( 'a.ui-input-clear' ), "input of type=text have clear button by default" );
});

test( "data-clear-btn adds clear text button to inputs", function() {
ok( $( "#textarea-clear-button" ).next( "a.ui-input-clear" ), "textarea with data-clear-btn=true has clear button" );
});
})(jQuery);