Is there a way to clear a field by clicking into it. I have an search field where the input is an address (Google Maps API) and when you click into it you need to highlight and delete the default field, same goes if you need to enter a new address. You would need to delete the address you just entered to enter a new one. I would like it to clear upon clicking into the box…
Thanks
Greg
I may not have understood correctly but I don’t think this is possible because if clicking in the input results in clearing the text then how can you input any text to save?
The ‘standard’ way would be to clear the input when the user clicks ‘save’ using a backend workflow called “Reset relevant inputs”.
Thanks for the reply Darren.
What I want to clear is the default value or existing value in order to enter a new value. So if you look at when you do a google search, in the input box it states ‘Search Google or type a URL’, when you click it, that statement automatically clears. for you to enter something new.
The issue I’m having is it doesn’t clear, I have to highlight it and delete it in order to put a new search in.
Ok I understand now, you can easily do this but adding a condition to your input field which clears the Placeholder when focused, like this;
Instead of Default Value, use the Placeholder field instead.
When you start typing into the field, the placeholder value disappears.
I think he is using the Placeholder field, which as you say, is the correct way he should do it, but then he needs to add the condition as I’ve shown above to make the placeholder disappear because Bubble’s default placeholder’s remain even when the input is clicked.
Really?.. Are you sure about that? (I’ve never seen that on any version of Google, nor pretty much ANY other search engine or search feature on any website, including the 20 or so I just checked…)
In any case, are you talking about the Placeholder, or the previously typed content? (you mentioned both, although they are different things)…
It’s pretty much standard practice to leave the placeholder visible until a User starts typing, and you can assume (given that most of the web’s largest and most prominent websites do this) there are very good reasons for doing so (presumably a lot of studies and testing have been done over the years to determine the best UX)…
But, if you do want to clear the placeholder when the input is focussed, it’s as simple as using a condition on the placeholder, as @darren.james7518 suggests…
If you’re talking about clearing the previous input value when the input is focussed again, you’ll need to run a workflow to do this…
As you can’t access an element’s Focus state directly for a workflow event, you’ll need to create something that you can access in a workflow event, that can be based conditionally on the input’s Focus state…
So, for example, you can add an element on your page (it can have 0 height and width, so as not to take up any space), which is Not Visible on pageload, but which becomes visible when the relevant input is Focussed.
Then you can run a Workflow when the condition (hidden element is visible) is true…
There doesn’t seem to be any reliable way to clear an input’s value in native Bubble (‘reset input’ and ‘reset data’ don’t seem to work in this case), but the following JavaScript should do the job:
document.getElementById('inputID').value = ''
(where inputID is obviously the ID attribute of your input element)
