Script. Typewriter for multiline input

Hey fellow bubblers!

Here is a simple script for you can run to create a typewriter effect for your inputs
Jun-04-2024 23-14-07

function typeEffect(element, text, delay = 100) {
  let i = 0;
  function type() {
    if (i < text.length) {
      element.value += text.charAt(i);
      i++;
      setTimeout(type, delay);
    } else {
      element.removeEventListener('focus', preventFocusReset); 
    }
  }
  element.value = ''; 

  function preventFocusReset(event) {
    event.preventDefault();
    element.value = text.slice(0, i); 
  }

  element.addEventListener('focus', preventFocusReset); 
  type();
}

var dynamicText = "This is the dynamically fetched text.";  // Replace this with dynamic data from Bubble
var multilineInput = document.getElementById('multilineInput');  // Ensure this matches the ID assigned to your multiline input

typeEffect(multilineInput, dynamicText, 100);
5 Likes

Feel free to cantact me if any questions or you need help in building apps

It’s wonderful.
I"ll use it!

1 Like