Handy tip: Here's how to highlight input text using JavaScript

[BrianHenderson]

“How to automatically focus and highlight the text in an input” is a question that gets asked pretty frequently here on the Bubble forums. It’s not something natively handled by Bubble at this time. It’s a useful thing to do, though, because it allows your users to just start typing without having to first clear an input’s initial value.

I just figured out how to do this for my own app and I thought I’d share it here because it’s working so well for me:

• Step 1: You’ll need to install the Toolkit plugin that allows you to run JavaScript in workflows.

• Step 2: In your app’s settings on the General tab you’ll need to turn on the “Expose the option to add an ID attribute to HTML elements”
  

  

• Step 3: Add an ID Attribute to your input that you wish to highlight via JavaScript. You can see it here at the very bottom. In this example, I named mine “input-tender-amount” but you can name yours whatever you want:
  

  

• Step 4: Create some workflow that will allow you trigger the JavaScript. In my case, when a particular group was visible I wanted a particular input to be highlighted. The Toolkit plugin makes the “Run javascript” action available to you for workflows as seen here:
  

  

The actual JavaScript code to make this work is:

const input = document.getElementById('YOUR_INPUT_ID_GOES_HERE');
  input.focus();
  input.select();

I have found that this technique does not work if your page or element is not done loading yet so you may need to play around with your conditions about when this JavaScript code fires off.

I hope you found this to be a handy tip! Please let me know if it works for you, too.

[alex.yaroshuk]

Hi @BrianHenderson - thank you for the tips.
Would you happen to also perhaps know what javascript code would help me achieve a specific styling such as bold or color of a particular regex, for example? My application use is to format “mentions” as bold and blue, I am looking for a way to do this as the user is typing their input.

[BrianHenderson]

Hi @alex.yaroshuk I’m sorry but that’s a bit beyond my skill set. You may be best served by making a new topic with this question so that others may find it easier to answer you. This may also be a good question to post on other developer forums elsewhere online because this isn’t just a Bubble question but a more general web dev kind of question.

You might take a cue from the Bubble forum’s way of mentioning someone’s username - they don’t style it differently in the input when you write “@someone’s_name” but it immediately appears as a tag after it’s submitted, plus the @ symbol makes it pretty clear there’s something particular going on here.

[BrianHenderson]

Hey! I actually had to refer to my own tutorial today for improving my app! That’s fun

I have yet another handy tip I learned elsewhere in the forums but I’m placing it here to tie these concepts together.

How to highlight an input when it is focused:

Bubble doesn’t allow using the “is focused” condition on workflows by default. This means you can’t just build a workflow that’s like “Do When [Input] Is Focused” so that when you click an input it automatically highlights any existing text in there. Nah, that would be too easy.

Instead, there’s a workaround where you can copy & paste a conditional from the Design tab and use it on the Workflow tab. See below to learn how to do it!

(Please note that this is not an officially “sanctioned” action by Bubble so it may not work in future versions, but it works for now!)

First, add the conditional for “is focused” to the element, right click the expression, and copy it. You can delete the conditional when you’re done:

Next, create a “Do When” workflow, set “Run this” to “Every time”, right-click the “Only When” input and paste the expression from step one:

Make sure to give your input an ID Attribute on the Design page as shown in my first tutorial:

Then reference the ID Attribute by name here in the javascript:

The actual JavaScript code to make this work is:

const input = document.getElementById('YOUR_INPUT_ID_GOES_HERE'); input.select();

Now when the input is clicked, the text value gets highlighted automatically and the user can just start typing in a new value without having to press delete first or use their mouse to highlight the text. This is great for a touchscreen interface like my app’s customers use.

[chris19]

This is very useful, especially when using input fields that need to be updated while on a mobile device.
Thanks for sharing @BrianHenderson

[julio.manfrini]

does anybody could make theses scripts work on SearchBox input?

I need to highlight a geographic places searchbox, but nothing works with this input. For curiosity, the event “when search box is focused” dont even exisist on workflows