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

[ksplinter007]

thank you thank you thank you! just applied this to my app.

[BrianHenderson]

@julio.manfrini

does anybody could make theses scripts work on SearchBox input?

Yup! I just now figured it out for my own purposes. I was referring to my own tutorial here and scratching my head about why it wasn’t working for a searchbox for geographic addresses when I realized you had the same issue.

This script works if you only have one searchbox you’re dealing with. I’m sure there’s a better, more specific way to target it in Javascript if you have more than one on your page:

const input = document.getElementsByClassName('tt-input')[0]; input.select();

The “getElementsByClassName” returns an array of elements with that “tt-input” class that the Bubble searchbox element uses, and so adding [0] limits your search to just the first item in that array. I think. I’m a total hack when it comes to Javascript, I don’t presume to know what the heck I’m talking about.

[ihsanzainal84]

You can use document.getElementById('elementID'); instead to get an element using it’s ID.

Correct, document.getElementsByClassName('tt-input')[0]; does find the first item of all elements with the class ‘tt-input’.

[BrianHenderson]

The search box element is an odd one in that there’s something about it that prevents highlighting its input text when using document.getElementById('elementID'); which is what led me to finding a different way to target it. It’s like there’s an extra layer or two of complexity about it that’s different than a normal input.

[ihsanzainal84]

It’s most likely in a child of the element that Bubble assigns the element ID to. Bubble does this with text elements.

You can try let parentElement = document.getElementById('elementID'); then grab it with
parentElement.children[0]; to select the first child element.

[BrianHenderson]

I sure appreciate the help, @ihsanzainal84 although I couldn’t figure out how to properly use your advice. My lack of Javascript knowledge is apparent.

I did some more experimentation and I found this to be effective in highlighting a particular searchbox’s input text:

const input = document.getElementById('searchbox_ID_goes_here').getElementsByClassName('tt-input')[0];
input.select();

I used my browser’s developer tools to look at the structure of the page and saw that the Bubble searchbox element consists of an outer div, with some inputs and other things inside it. If you assign the searchbox an ID Attribute in the editor, Bubble only places the ID on the outer div, but we’re trying to target the input inside that has the “tt-input” class so that we can highlight its text. Take a look:

[ihsanzainal84]

Good find. That’s pretty much one of the other ways to go about it in this case. Essentially what the first line of the code is doing is looking for an element with the class “tt-input” in the element with the ID “input-address”.

I am of the opinion that all, intermediate and above, Bubble devs should learn HTML and Javascript. Not only does it open more opportunities to expand/optimize your app, it makes troubleshooting less complicated. With AI there really any isn’t not to. AI makes it much easier to learn, understand and write code. I’ve always been able to read JS but I hated remembering syntax.

I get that Bubble is no-code but everyone should strive to understand what makes the engine that drives their businesses, work.

[Newed]

I agree, people should learn at least the basics of traditional programming (the basic triad), even if they do the reverse route, starting with no code and moving on to the basics of code.

Another thing to mention is that although most people consider Bubble a no code tool, including the Bubble team itself, for some guys it becomes a low code tool, at least a little, since we are eventually creating our own plugins, using custom code, etc.