Selecting Existing Content on Clicking a Field

Hello, is there way to select all contents of a field on clicking the field? This can speed up data entry but there appears to be no way to implement this, for instance, under ‘when this … is focussed’ - (option to select all content here would be good). Grateful for any suggestions.

Trying to figure this out myself, don’t think it’s possible though.

What sort of “field” are you taking about? The value of an input? The value of a text? A cell in a repeating group? ???

Any kind of field where the user can enter a value - this is a standard behaviour available in most web apps these days - one click selects the entire value, so that the user can start typing without having to select the existing value and delete it first.

2 Likes

Placeholders work kind that. Values reported in inputs generally do not. (You wouldn’t want the behavior you describe for a multiline text, for example!)

Anyway, you can build what you desire here:

Put the input in its own group. (Easy way: Right click and “group elements in a group”.)

Make the underlying element “not clickable”.

What we’re going to do is intercept the click using the group.

Workflow for when that group is clicked:

  1. Null out the value displayed in the input. Warning: this will change any value the input is tied to if you’re using auto binding or actively looking for changes to the input, right?

  2. Set focus to the input element inside the group.

But note that if sounds like you are confused about how Placeholder and Initial Value are different and you don’t actually need what I described above.

Thanks for taking the time to reply, Keith. I’m aware of the workaround you suggest - but it doesn’t quite create the UX I want. Just selecting the text and not clearing everything in a field (although you could argue both achieve the same result) is more elegant. Least because the user can undo the action if the content was accidentally deleted. This could be a feature request. @emmanuel ?

I suspect you could create the desired effect with a line or two of javascript. You could Run Javascript (using a Plugin) when the input is focused and have the Javascript select the input text by referencing the element by ID.

How to do this …

Turn on element ids in the Settings tab.
Give your input an element id.
Add a HTML element, put this inside…

<script>
  $(document).ready(function(){
    $('#myelementid').on('focus', function(){$('#myelementid').select()})
  })
</script>
2 Likes

Hi Mishav, thank you! I have an autosuggest field where I am trying to implement this. Gave that field an ID attribute, placed an HTML on the page and pasted in your code - replaced the myelementid within commas with mine, but it does not work as intended (when I click back into the field when an autosuggested content is displayed, that content is not selected. Any ideas?

hi @kenlaji, do you mean a search box? Bubble implements this differently than inputs.

Try this …

<script>
  $(document).ready(function(){
    $('#mysearchboxid input').last().on('focus', function(e){e.target.select()})
  })
</script>
1 Like

Sorry, that doesn’t work either :frowning:

Can you explain more about what you do have? Which element is this?

I have a number of other elements on the page. For clarity, I created another test app here: https://kl-sandbox.bubbleapps.io/version-test?debug_mode=true

Your original code is on this page. Type a bit of text in that field, then click back out and back in the field. You can see the text getting briefly selected, but it does not stay. I will try another field with the second code snippet soon too.

The editor is here: https://bubble.io/page?name=index&id=kl-sandbox&tab=tabs-1

In the test app, the text input select on focus was working for me.

I added an id to the search box, and got that working too, once a valid search term is matched.

I’ve altered the first bit of code so it should work okay with multiple elements on the page, even if they have the same id.

Tested on Windows 8.1 Chrome and Firefox.

Thanks. On Safari on Mac, it does not work. On Chrome, sometimes only selects characters to the left of curser - weird. I wonder if we should make the selection on click as opposed to focus?

Thanks again for all your help. You are a star!

Hey @kenlaji, I’ve altered it to work on Safari too … tested on iPad2 . Hopefully works on Mac as well : )

Thanks for further effort on this - can’t thank you enough - people like you make a Bubble beautiful platform! Sadly it does not work on a Mac :frowning:

This topic was automatically closed after 70 days. New replies are no longer allowed.