Force uppercase as user types in input?

Ghoul · 2024-11-03T15:16:32.810Z

Hello Bubble Friends,
I’m looking for a solution that doesn’t use a plugin. I understand this may require some CSS, which I don’t have experience with and thus my current efforts have failed so any guidance would be appreciated.

(I’m aware of the :uppercase function that will format the text after the fact, but for my use I would very much prefer the input value to appear in all uppercase as the user types.)

Thoughts on how to make this possible? Thanks!

shankar · 2024-11-03T15:45:56.712Z

You can try this approach:

Set ID attribute for your input element (eg: my_input)

image872×823 23.6 KB

Add HTML element and insert the following code. Make sure that the ID attribute matches the one you have setup for the input element.

<script>
  var inputElement = document.getElementById("my_input");

  inputElement.addEventListener("input", function() {
    this.value = this.value.toUpperCase();
  });
</script>

image710×395 12.3 KB

The input value will be updated to uppercase as user types

image381×124 1.58 KB

Ghoul · 2024-11-03T16:14:18.970Z

shankar:

<script>
  var inputElement = document.getElementById("my_input");

  inputElement.addEventListener("input", function() {
    this.value = this.value.toUpperCase();
  });
</script>

Hello. Thank you so much for your response. I tried your method and method’s similar to it and they continue to not work. I’m assuming the issue is something very simple that I’m failing to recognize? Do you see any errors in the screen caps below?

Screenshot 2024-11-03 at 11.08.02 AM672×1732 87.3 KB

Screenshot 2024-11-03 at 11.07.44 AM676×1734 75.5 KB

Thank you!

shankar · 2024-11-03T16:41:41.568Z

Are you getting any errors like this in console ?

image726×216 14.2 KB

In this case, the script might be running even before the element is loaded on page.

You can try this:

In HTML element, instead of inserting code by default, add the code in conditional - when “Input is visible”. This will ensure that the script runs after the Input element is loaded.

image667×452 13.3 KB

Ghoul · 2024-11-03T16:47:50.323Z

That worked! Thank you so much! This is very helpful.

bhavesh.ces · 2024-11-04T03:03:03.151Z

Ghoul:

my use I would very much prefer the input value to appear in all uppercase as the user types.)

Hi Ghoul,
though I am novice to bubble, but why you don’t want to use uppercase when you can have all inputs in uppercase as I used in my editor. attached image.

image315×209 2.82 KB

system · 2025-01-12T15:16:43.798Z

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