Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Clear input button for text inputs #1834

Closed
adickson opened this Issue · 32 comments
@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
@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 toddparker closed this
@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?

@gseguin gseguin was assigned
@toddparker

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

@toddparker toddparker reopened this
@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
@collinforrester

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

@collinforrester collinforrester referenced this issue from a commit in collinforrester/jquery-mobile
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 referenced this issue from a commit in collinforrester/jquery-mobile
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 referenced this issue from a commit in collinforrester/jquery-mobile
Collin F text input: modified test to include new text input type. Feature req…
…uest #1834 - clear input button for text inputs
b624b6f
@jaspermdegroot
Collaborator

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

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

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

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
Collaborator

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

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

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

@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.