Force uppercase as user types in input?

[Ghoul]

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]

You can try this approach:

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

2. 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>

The input value will be updated to uppercase as user types

[Ghoul]

@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?

Thank you!

[shankar]

Are you getting any errors like this in console ?

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.

[Ghoul]

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

[bhavesh.ces]

@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.