This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Clear input button for text inputs #1834
Closed
Description
Would it be possible to add a feature request for an optional clear button on text fields as per the search field clear button?
Metadata
Metadata
Assignees
Type
Projects
Relationships
Development
No branches or pull requests
Participants
Activity
toddparker commentedon 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 commentedon Jun 17, 2011
Awesome, I'm really glad to hear this.
fletom commentedon Jul 13, 2011
Has there been any progress on this yet?
toddparker commentedon 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 commentedon Sep 27, 2011
Added to the feature request wiki page:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests
ray007 commentedon 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 commentedon Sep 13, 2012
Any update on this feature?
toddparker commentedon Sep 13, 2012
We'll look at adding this to 1.3. Re-opening.
efesar commentedon 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 commentedon Nov 7, 2012
We're adding this soon for 1.3. Looking for input on the option name -
data-clear-btn="true"?ryanilg commentedon Nov 7, 2012
Sounds good to me.
15 remaining items
ray007 commentedon 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 commentedon 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 commentedon 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 commentedon 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 commentedon 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 commentedon 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 commentedon 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 commentedon Feb 13, 2013
No. No special settings all default and both desktop browser experience the same thing. No clear button.
jaspermdegroot commentedon 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 commentedon 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 commentedon 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 commentedon 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.
nightbook commentedon 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: