Clear input button for text inputs

[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?

[toddparker]

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

[fletom]

Awesome, I'm really glad to hear this.

[fletom]

Has there been any progress on this yet?

[toddparker]

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

[toddparker]

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

[ray007]

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]

Any update on this feature?

[toddparker]

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

[efesar]

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]

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

[ryanilg]

Sounds good to me.

[efesar]

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//issues/1834#issuecomment-10166714.

[collinforrester]

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

[jaspermdegroot]

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

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

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

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]

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

[jaspermdegroot]

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]

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]

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

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

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

and I am not getting the clear icon

[jaspermdegroot]

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

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

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

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

[jaspermdegroot]

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

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@gh.neting.ccwrote:

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//issues/1834#issuecomment-39448309
.