Clear input button for text inputs #1834

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

Projects

None yet
@adickson

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

@scottjehl scottjehl was assigned Jun 17, 2011
@toddparker
Contributor

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

@fletom
fletom commented Jun 17, 2011

Awesome, I'm really glad to hear this.

@fletom
fletom commented Jul 13, 2011

Has there been any progress on this yet?

@toddparker
Contributor

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

@toddparker
Contributor

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

@toddparker toddparker closed this Sep 27, 2011
@ray007
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
ryanilg commented Sep 13, 2012

Any update on this feature?

@gseguin gseguin was assigned Sep 13, 2012
@toddparker
Contributor

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

@toddparker toddparker reopened this Sep 13, 2012
@efesar
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
Contributor

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

@ryanilg
ryanilg commented Nov 7, 2012

Sounds good to me.

@efesar
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
Contributor

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

@collinforrester collinforrester pushed a commit to collinforrester/jquery-mobile that referenced this issue Nov 13, 2012
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
@collinforrester 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
eeb69a0
@collinforrester collinforrester pushed a commit to collinforrester/jquery-mobile that referenced this issue Nov 13, 2012
Collin F text input: modified test to include new text input type. Feature req…
…uest #1834 - clear input button for text inputs
b624b6f
@jaspermdegroot
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.
@toddparker
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.

@jaspermdegroot
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.

@jerone
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
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.

@collinforrester collinforrester added a commit to collinforrester/jquery-mobile that referenced this issue Nov 15, 2012
@collinforrester collinforrester textinput.js: deprecated clearSearchButtonText, removed duplicate cod…
…e. Feature #1834: clear input button for text inputs
5a372d4
@collinforrester collinforrester added a commit to collinforrester/jquery-mobile that referenced this issue Nov 15, 2012
@collinforrester collinforrester textinput.css: fixed input inside fieldcontain width, fixed disabled …
…inputs. Feature #1834: clear input button for text inputs
e1bd316
@jaspermdegroot
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.

@ray007
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
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.

@ray007
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
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
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.

@cas8180
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
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/

@cas8180
cas8180 commented Feb 13, 2013

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

@jaspermdegroot
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.

@weisborg

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

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
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
@nightbook

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