Clicking in input field to Select all field content automatically

Need help
1

Hello all,
I searched and couldn’t find how to do this.

I want the same behaviour as bubble does it, say with the interface when clicking on a text property field.
So, simply said:

  1. I enter a page where I have an input field. The input field already contains a value picked up from the database or entered manually previously
  2. I click in that field. The field content is selected (highlighted)
  3. I type another value and this value automatically replaces the current content

Example as it is working in the bubble.io interface
Step 1. - Field with current content
image

Step 2. Click once and the field content is selected
image

Step 3. Type in new content - current content is replaced
image

How do I replicate that behaviour in my App when using an input field?
Right now, when I click in the input field that already contains a value, the cursor is placed where I clicked. In order to replace that value, I have to delete (backspace or delete) the content that is there in order to enter a new content. Annoying… :wink: so my users say.

Thanks,
Guy

2

This is probably the most ‘Bubble’ way to do it…

Select Input Text

Editor

The first way (input A) uses ‘when a hidden element is visible’ as the condition to run the Javascript.

The second way (input B) is cleaner (and doesn’t require a hidden element), but it might not be officially supported by Bubble - you can’t select ‘when an input is focussed’ as an option in an only when condition for a workflow, you have to copy and paste it from elsewhere… so it might not be a reliable long-term solution?.. (maybe safer to use the first option).

3

Thank for this reply Adam.
I am quite a newbie… where can I see the JavaScript code? How do I implement this JavaScript code in my App?
(Note: I at least know what JavaScript is… :wink:

4

Just look at how I’ve done it in the example I linked to, and copy that…

5

I decided to use a pulldown for the golf score and the number of putts. Better UX, easier to implement. I use the toolbox plugin List of numbers.