New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear input button for text inputs #1834

Closed
adickson opened this Issue Jun 16, 2011 · 32 comments

Comments

Projects
None yet
@adickson

adickson commented Jun 16, 2011

Would it be possible to add a feature request for an optional clear button on text fields as per the search field clear button?

@ghost ghost assigned scottjehl Jun 17, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jun 17, 2011

Contributor

We've discussed this and will add an option to add a cear button to any of the single line text inputs.

Contributor

toddparker commented Jun 17, 2011

We've discussed this and will add an option to add a cear button to any of the single line text inputs.

@fletom

This comment has been minimized.

Show comment
Hide comment
@fletom

fletom Jun 17, 2011

Awesome, I'm really glad to hear this.

fletom commented Jun 17, 2011

Awesome, I'm really glad to hear this.

@fletom

This comment has been minimized.

Show comment
Hide comment
@fletom

fletom Jul 13, 2011

Has there been any progress on this yet?

fletom commented Jul 13, 2011

Has there been any progress on this yet?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 14, 2011

Contributor

Since this a new feature, it's not as high a priority as other, core things. We'll see what we can do.

Contributor

toddparker commented Jul 14, 2011

Since this a new feature, it's not as high a priority as other, core things. We'll see what we can do.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 27, 2011

Contributor

Added to the feature request wiki page:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

Contributor

toddparker commented Sep 27, 2011

Added to the feature request wiki page:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

@toddparker toddparker closed this Sep 27, 2011

@ray007

This comment has been minimized.

Show comment
Hide comment
@ray007

ray007 May 9, 2012

I guess it's too much to hope there's a patch or something to try this until it finds it way into mainline?

ray007 commented May 9, 2012

I guess it's too much to hope there's a patch or something to try this until it finds it way into mainline?

@ryanilg

This comment has been minimized.

Show comment
Hide comment
@ryanilg

ryanilg Sep 13, 2012

Any update on this feature?

ryanilg commented Sep 13, 2012

Any update on this feature?

@ghost ghost assigned gseguin Sep 13, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 13, 2012

Contributor

We'll look at adding this to 1.3. Re-opening.

Contributor

toddparker commented Sep 13, 2012

We'll look at adding this to 1.3. Re-opening.

@toddparker toddparker reopened this Sep 13, 2012

@efesar

This comment has been minimized.

Show comment
Hide comment
@efesar

efesar Nov 1, 2012

I have a quick and simple workaround until this feature is in the stable version. In your HTML markup, use type="search" in your input tag. After your page has been initialized (best to catch it in the "pageshow" event), change the property type from "search" to "email" or "password" or whatever you need. Hide the search icon if you need to by overriding its CSS. It works like a charm.

efesar commented Nov 1, 2012

I have a quick and simple workaround until this feature is in the stable version. In your HTML markup, use type="search" in your input tag. After your page has been initialized (best to catch it in the "pageshow" event), change the property type from "search" to "email" or "password" or whatever you need. Hide the search icon if you need to by overriding its CSS. It works like a charm.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 7, 2012

Contributor

We're adding this soon for 1.3. Looking for input on the option name - data-clear-btn="true"?

Contributor

toddparker commented Nov 7, 2012

We're adding this soon for 1.3. Looking for input on the option name - data-clear-btn="true"?

@ryanilg

This comment has been minimized.

Show comment
Hide comment
@ryanilg

ryanilg Nov 7, 2012

Sounds good to me.

ryanilg commented Nov 7, 2012

Sounds good to me.

@efesar

This comment has been minimized.

Show comment
Hide comment
@efesar

efesar Nov 8, 2012

Perfect! It will be nice to have a clear-button option built in so as to
not need to use a workaround.

-Keith Alexander W.
http://efesar.com

On Wed, Nov 7, 2012 at 2:52 PM, Ryan Ilg notifications@github.com wrote:

Sounds good to me.


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/1834#issuecomment-10166714.

efesar commented Nov 8, 2012

Perfect! It will be nice to have a clear-button option built in so as to
not need to use a workaround.

-Keith Alexander W.
http://efesar.com

On Wed, Nov 7, 2012 at 2:52 PM, Ryan Ilg notifications@github.com wrote:

Sounds good to me.


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/1834#issuecomment-10166714.

@collinforrester

This comment has been minimized.

Show comment
Hide comment
@collinforrester

collinforrester Nov 9, 2012

Contributor

By any chance have you guys started coding this yet? We have an implementation that could be submitted for review.

Contributor

collinforrester commented Nov 9, 2012

By any chance have you guys started coding this yet? We have an implementation that could be submitted for review.

collinforrester pushed a commit to collinforrester/jquery-mobile that referenced this issue Nov 13, 2012

Collin F Collin F
text input: modified css to add clear button to input type text. Feat…
…ure request #1834 - clear input button for text inputs

collinforrester pushed a commit to collinforrester/jquery-mobile that referenced this issue Nov 13, 2012

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

collinforrester pushed a commit to collinforrester/jquery-mobile that referenced this issue Nov 13, 2012

@ghost ghost assigned jaspermdegroot Nov 13, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 14, 2012

Member

@toddparker

See my comment at @collinforrester his PR #5281

What is your opinion regarding those two bullets?

  • I think we should introduce option clearButtonText and deprecate clearSearchButtonText.
  • 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.
Member

jaspermdegroot commented Nov 14, 2012

@toddparker

See my comment at @collinforrester his PR #5281

What is your opinion regarding those two bullets?

  • I think we should introduce option clearButtonText and deprecate clearSearchButtonText.
  • 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.
@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 14, 2012

Contributor

@uGoMobi

I think we should use clearButtonText across the board for consistency so deprecate clearSearchButtonText is good (note this in the upgrade guide)

Re: the the native conflicts, it looks like the native stuff actually prevents the clear button from appearing at all - is that right? http://jquerymobile.com/branches/text-input-clear-btn/docs/demos/textinput/index.html

If that's the case, we may be able to remove things like the spinner arrows via CSS but that would be a limitation we'd document. If you want clear buttons, the spinners would go away. Worth looking into more.

Contributor

toddparker commented Nov 14, 2012

@uGoMobi

I think we should use clearButtonText across the board for consistency so deprecate clearSearchButtonText is good (note this in the upgrade guide)

Re: the the native conflicts, it looks like the native stuff actually prevents the clear button from appearing at all - is that right? http://jquerymobile.com/branches/text-input-clear-btn/docs/demos/textinput/index.html

If that's the case, we may be able to remove things like the spinner arrows via CSS but that would be a limitation we'd document. If you want clear buttons, the spinners would go away. Worth looking into more.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 14, 2012

Member

@toddparker

On Chrome: The number input gets the clear button on top of the spinner (only if you actually type a number). The date input did't get the clear button at all.

I will check all major browsers on Linux/Mac OS/Windows.

Member

jaspermdegroot commented Nov 14, 2012

@toddparker

On Chrome: The number input gets the clear button on top of the spinner (only if you actually type a number). The date input did't get the clear button at all.

I will check all major browsers on Linux/Mac OS/Windows.

@jerone

This comment has been minimized.

Show comment
Hide comment
@jerone

jerone Nov 15, 2012

Contributor

If the 'new' number inputs on Chrome and any browser are supported an extra margin/padding right should be added I think.

var elm = document.createElement("input");
elm.setAttribute("type", "number");
if (elm.type !== "text") { /* number input supported, probably spinners, so add extra padding... */ }}
Contributor

jerone commented Nov 15, 2012

If the 'new' number inputs on Chrome and any browser are supported an extra margin/padding right should be added I think.

var elm = document.createElement("input");
elm.setAttribute("type", "number");
if (elm.type !== "text") { /* number input supported, probably spinners, so add extra padding... */ }}
@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 15, 2012

Member

@jerone

Re: if (elm.type !== "text") { /* number input supported, probably spinners, so add extra padding... */

If the input type is not "text" it doesn't mean it is "number" ("date", "tel", "password", "file", "search").
We could target the number input in CSS (input[type="number"]) to set extra padding, but I am not in favor of this because I don't agree with "probably spinners". So far I've only seen them on Chrome desktop, Safari desktop, Opera desktop, and Opera Mobile.
Other solution is to set extra margin on the spinner (-webkit-inner/outer-spin-button) but that probably looks a bit weird.

About the date input: On Safari desktop a spinner is added. Chrome desktop, Opera desktop, and Opera Mobile show a "select indicator" for the datepicker. On Chrome for Android there is no indicator for the datepicker, but the clear button doesn't work.

Member

jaspermdegroot commented Nov 15, 2012

@jerone

Re: if (elm.type !== "text") { /* number input supported, probably spinners, so add extra padding... */

If the input type is not "text" it doesn't mean it is "number" ("date", "tel", "password", "file", "search").
We could target the number input in CSS (input[type="number"]) to set extra padding, but I am not in favor of this because I don't agree with "probably spinners". So far I've only seen them on Chrome desktop, Safari desktop, Opera desktop, and Opera Mobile.
Other solution is to set extra margin on the spinner (-webkit-inner/outer-spin-button) but that probably looks a bit weird.

About the date input: On Safari desktop a spinner is added. Chrome desktop, Opera desktop, and Opera Mobile show a "select indicator" for the datepicker. On Chrome for Android there is no indicator for the datepicker, but the clear button doesn't work.

collinforrester added a commit to collinforrester/jquery-mobile that referenced this issue Nov 15, 2012

textinput.js: deprecated clearSearchButtonText, removed duplicate cod…
…e. Feature #1834: clear input button for text inputs

collinforrester added a commit to collinforrester/jquery-mobile that referenced this issue Nov 15, 2012

textinput.css: fixed input inside fieldcontain width, fixed disabled …
…inputs. Feature #1834: clear input button for text inputs
@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 20, 2012

Member

This feature landed with commit d538941 and will be available in 1.3. We have to see if add some input types (date, number, color) to the blacklist because there might be conflicts with native browser controls.

Note that the new option clearBtn (data-clear-btn) can't be set to false for search inputs. Also, textarea can't get a clear button.

Member

jaspermdegroot commented Nov 20, 2012

This feature landed with commit d538941 and will be available in 1.3. We have to see if add some input types (date, number, color) to the blacklist because there might be conflicts with native browser controls.

Note that the new option clearBtn (data-clear-btn) can't be set to false for search inputs. Also, textarea can't get a clear button.

@ray007

This comment has been minimized.

Show comment
Hide comment
@ray007

ray007 Nov 30, 2012

just a final related question: will we be able to use the mechanism used to display this button to also display our own custom buttons? I.e. something like a file-input but the browse button get some selection data via ajax and opens a dialog ...

ray007 commented Nov 30, 2012

just a final related question: will we be able to use the mechanism used to display this button to also display our own custom buttons? I.e. something like a file-input but the browse button get some selection data via ajax and opens a dialog ...

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 30, 2012

Member

@ray007

The behaviour and button icon of this feature are hardcoded, but you could copy and edit the code to add a custom button. Prevent the framework from enhancing the input and bind a call to your function to the "pagecreate" event.
As long as you use the same classes on the input, the wrapper div and the button (.ui-input-clear) the CSS will be fine.

However, when it comes to the file input you are very limited in what you can customize, because of security reasons. File inputs are meant to submit a local file, not a file from your server, so you can't access that via Ajax.
See also #5050.

Member

jaspermdegroot commented Nov 30, 2012

@ray007

The behaviour and button icon of this feature are hardcoded, but you could copy and edit the code to add a custom button. Prevent the framework from enhancing the input and bind a call to your function to the "pagecreate" event.
As long as you use the same classes on the input, the wrapper div and the button (.ui-input-clear) the CSS will be fine.

However, when it comes to the file input you are very limited in what you can customize, because of security reasons. File inputs are meant to submit a local file, not a file from your server, so you can't access that via Ajax.
See also #5050.

@ray007

This comment has been minimized.

Show comment
Hide comment
@ray007

ray007 Dec 1, 2012

@uGoMobi
Thanks for the quick response.
And I don't intend to add a browse button to a file-input, but to a text-input holding the name of a resource you can find by browsing the server. Which makes it work analog to a file-input ...

ray007 commented Dec 1, 2012

@uGoMobi
Thanks for the quick response.
And I don't intend to add a browse button to a file-input, but to a text-input holding the name of a resource you can find by browsing the server. Which makes it work analog to a file-input ...

@cas8180

This comment has been minimized.

Show comment
Hide comment
@cas8180

cas8180 Feb 12, 2013

Was this added? I have the latest RC and html such as this:

and I am not getting the clear icon

cas8180 commented Feb 12, 2013

Was this added? I have the latest RC and html such as this:

and I am not getting the clear icon

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 12, 2013

Member

@cas8180

Yes it has been added. I can't see your html because you didn't wrap it in triple backticks, but I suggest you look in the docs (http://jquerymobile.com/demos/1.3.0-rc.1/docs/forms/textinputs/) how to use this option.

Member

jaspermdegroot commented Feb 12, 2013

@cas8180

Yes it has been added. I can't see your html because you didn't wrap it in triple backticks, but I suggest you look in the docs (http://jquerymobile.com/demos/1.3.0-rc.1/docs/forms/textinputs/) how to use this option.

@cas8180

This comment has been minimized.

Show comment
Hide comment
@cas8180

cas8180 Feb 13, 2013

@uGoMobi
Even in the documentation link you provided there is no clear button being displayed in the text field that it says its supposed to be applied to. I tested this in IE and Chrome and no clear button is visible. Only for the color picker widget

cas8180 commented Feb 13, 2013

@uGoMobi
Even in the documentation link you provided there is no clear button being displayed in the text field that it says its supposed to be applied to. I tested this in IE and Chrome and no clear button is visible. Only for the color picker widget

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 13, 2013

Member

@cas8180

Do you have any special language / keyboard settings for your system or browser. Do you use multibyte characters?
Do you see the clear button if you type in the search input? http://jquerymobile.com/demos/1.3.0-rc.1/docs/forms/search/

Member

jaspermdegroot commented Feb 13, 2013

@cas8180

Do you have any special language / keyboard settings for your system or browser. Do you use multibyte characters?
Do you see the clear button if you type in the search input? http://jquerymobile.com/demos/1.3.0-rc.1/docs/forms/search/

@cas8180

This comment has been minimized.

Show comment
Hide comment
@cas8180

cas8180 Feb 13, 2013

No. No special settings all default and both desktop browser experience the same thing. No clear button.

cas8180 commented Feb 13, 2013

No. No special settings all default and both desktop browser experience the same thing. No clear button.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 13, 2013

Member

@cas8180 - Can you post a screenshot here? You can just drag and drop the image in a comment. Thanks!

Edit: I mean... screenshot of text input that should get a clear button but doesn't have it while there is text in it.

Member

jaspermdegroot commented Feb 13, 2013

@cas8180 - Can you post a screenshot here? You can just drag and drop the image in a comment. Thanks!

Edit: I mean... screenshot of text input that should get a clear button but doesn't have it while there is text in it.

@weisborg

This comment has been minimized.

Show comment
Hide comment
@weisborg

weisborg Mar 25, 2013

New feature is great and monitors text change and focus to hide itself, but doesn't monitor Form Reset. When resetting a form by button or code the clear buttons remain on the inputs.

weisborg commented Mar 25, 2013

New feature is great and monitors text change and focus to hide itself, but doesn't monitor Form Reset. When resetting a form by button or code the clear buttons remain on the inputs.

@nightbook

This comment has been minimized.

Show comment
Hide comment
@nightbook

nightbook Apr 3, 2014

Is there anyway to disable the Clear Button from Search?
@uGoMobi mentioned it can't be set to false:
"Note that the new option clearBtn (data-clear-btn) can't be set to false for search inputs. Also, textarea can't get a clear button."
Is there anyway to work around this as I'd rather not have the functionality.
Thanks

nightbook commented Apr 3, 2014

Is there anyway to disable the Clear Button from Search?
@uGoMobi mentioned it can't be set to false:
"Note that the new option clearBtn (data-clear-btn) can't be set to false for search inputs. Also, textarea can't get a clear button."
Is there anyway to work around this as I'd rather not have the functionality.
Thanks

@collinforrester

This comment has been minimized.

Show comment
Hide comment
@collinforrester

collinforrester Apr 3, 2014

Contributor

Programmatically I don't know of a way, but I don't see why you couldn't just remove the DOM elements before page show and take the padding-right for those elements back down to 5px or so.

.ui-input-search {
  padding-right: 5px;
}
$('.ui-input-clear').remove(); // in the appropriate jQM event handler
Contributor

collinforrester commented Apr 3, 2014

Programmatically I don't know of a way, but I don't see why you couldn't just remove the DOM elements before page show and take the padding-right for those elements back down to 5px or so.

.ui-input-search {
  padding-right: 5px;
}
$('.ui-input-clear').remove(); // in the appropriate jQM event handler
@nightbook

This comment has been minimized.

Show comment
Hide comment
@nightbook

nightbook Apr 3, 2014

Thanks @collinforrester,
Good call, I ended up hiding it with a display:none; but will take
advantage of your padding-right to fix the display. Appreciated.
Cheers

On Thu, Apr 3, 2014 at 6:08 AM, collinforrester notifications@github.comwrote:

Programmatically I don't know of a way, but I don't see why you couldn't
just remove the DOM elements before page show and take the padding-right
for those elements back down to 5px or so.

.ui-input-search {
padding-right: 5px;}

$('.ui-input-clear').remove(); // in the appropriate jQM event handler

Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/1834#issuecomment-39448309
.

nightbook commented Apr 3, 2014

Thanks @collinforrester,
Good call, I ended up hiding it with a display:none; but will take
advantage of your padding-right to fix the display. Appreciated.
Cheers

On Thu, Apr 3, 2014 at 6:08 AM, collinforrester notifications@github.comwrote:

Programmatically I don't know of a way, but I don't see why you couldn't
just remove the DOM elements before page show and take the padding-right
for those elements back down to 5px or so.

.ui-input-search {
padding-right: 5px;}

$('.ui-input-clear').remove(); // in the appropriate jQM event handler

Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/1834#issuecomment-39448309
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment