Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Clear input button for text inputs #5281

Merged
merged 5 commits into from

2 participants

Collin Forrester Jasper de Groot
Collin Forrester

This is a change to four files (2 test files and then the js/css for the text input widget) to add feature request #1834 (#1834) to automatically add a text clear button to text inputs with data-clear-button=true.

May need to decide if its right to allow the clear button on textarea elements or if only on input type text (right now it does both).

Collin F and others added some commits
Collin F text input: modified css to add clear button to input type text. Feat…
…ure request #1834 - clear input button for text inputs
8c8c3f9
Collin F text input: modified text input widget to include clear button on inp…
…ut type text. Feature request #1834 - clear input button for text inputs
eeb69a0
Collin F text input: modified test to include new text input type. Feature req…
…uest #1834 - clear input button for text inputs
b624b6f
Jasper de Groot

@collinforrester

Thanks for the PR! I reviewed your code and created a test page. Here is my feedback:

  • clearBtn: false should be added to options so you can configure the default or set the option programmatically, not only with the data- attribute.
  • With your code the clear button is added if you don't set the data- attribute at all. After making clearBtn an option you can use if ( input.is( "[type='text']" ) && !!o.clearBtn ) { }. The widget factory will check if data-clear-btn has been set.
  • I think we should introduce option clearButtonText and deprecate clearSearchButtonText.
  • Except for the variable focusedEl the code for adding the clear button is exactly the same as for "search" so we shouldn't have to duplicate everything.
  • Text inputs and textarea should get the ui-corner-all class instead of ui-btn-corner-all.
  • The disabled styling doesn't work anymore.
  • The width is incorrect when wrapped in a div with data-role="fieldcontain".
  • There are some conflicts with native browser controls for input types number, date, etc. (I tested on Chrome). I am not sure yet what we should do with those.
  • The slider widget has a number input that is enhanced by the textinput widget. In this case clearBtn should always be `false.

I know it is quite a lot. Do you want to look into this?

Collin Forrester

No problem, I'll keep looking into this. I'll go through the list and commit some changes for each one.

Thanks for the quick review, too.

Collin Forrester

@uGoMobi

So I committed some stuff that addresses everything but your last two bullets in your original review (I just noticed I didn't read your comment about the slider widget). But I made those changes to affect only search, text, and textarea until you guys decide what you want to do with the other input types in #1834.

Jasper de Groot

hi @collinforrester

Thanks a lot! I pulled your changes in the branch that I created, so the test page is updated... looks good!

Had to make a small change because of an undeclared variable. Also, at second thought clearBtnText is a more consistent name for the option, so I changed that. See my commits here https://github.com/jquery/jquery-mobile/commits/text-input-clear-btn

I will take a closer look at the JS and CSS soon and will let you know what we want to do with the number and date input.

Thanks again!

Jasper de Groot jaspermdegroot merged commit e1bd316 into from
Jasper de Groot

@collinforrester

I just merged your commits in master.

I made a few changes. We think the clear button shouldn't be optional for "search". I enabled the option for all input types. We still have to look into date, number, color and other HTML5 input types, but those can be added to the blacklist. We also decided not to add the feature for textareas because this is not really common, and you are not happy when you accidently touch the clear button after typing long message on your phone ;-)

Thanks a lot for all your work on this new feature! Looking forward to your next PR! :-)

Zach Leatherman zachleat referenced this pull request in NebraskaJS/Wiki
Closed

January 3rd Presentation Topic #1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 13, 2012
  1. text input: modified css to add clear button to input type text. Feat…

    Collin F authored
    …ure request #1834 - clear input button for text inputs
  2. text input: modified text input widget to include clear button on inp…

    Collin F authored
    …ut type text. Feature request #1834 - clear input button for text inputs
  3. text input: modified test to include new text input type. Feature req…

    Collin F authored
    …uest #1834 - clear input button for text inputs
Commits on Nov 15, 2012
  1. Collin Forrester

    textinput.js: deprecated clearSearchButtonText, removed duplicate cod…

    collinforrester authored
    …e. Feature #1834: clear input button for text inputs
  2. Collin Forrester

    textinput.css: fixed input inside fieldcontain width, fixed disabled …

    collinforrester authored
    …inputs. Feature #1834: clear input button for text inputs
This page is out of date. Refresh to see the latest.
29 css/structure/jquery.mobile.forms.textinput.css
View
@@ -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; }
@@ -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 js/widgets/forms/textinput.js
View
@@ -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
},
@@ -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( "" )
@@ -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 );
}
@@ -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;
@@ -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;
4 tests/unit/textinput/index.html
View
@@ -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 tests/unit/textinput/textinput_core.js
View
@@ -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);
Something went wrong with that request. Please try again.