[Free Plugin] Insert with typewriter effect

Hello Bubblers,

I made a plugin based on the plugin built by JC Massé (Insert at cursor position Plugin | Bubble).

This is a simple action to insert text to an input element. I have edited the code and added a typewiter effect to the original plugin.
Bubble _ No-code apps - 22 June 2022 (1) (1)

To use the plugin:

  1. Go to Settings > General > Expose the option to add an ID attribute to HTML elements: Check the box.
  2. Add an ID attribute to the input element
  3. Add the action. Text field Attribute ID = the input element’s ID attribute.

Hugo
Developer @ Nalfe

60+ Bubble Templates
10+ Bubble Plugins
Bubble Component Library & Extension
No-code Development Subscriptions
No-code Podcast

6 Likes

Hello @hugolee

Thanks for the plugin!

Just wanted to ask how can I clean out the value a input and insert another value from a button action.

Let’s say I have an action on button click to send a message value to an input and when I want to send another different value to same input it is not cleaned.
I tried using Reset relevant inputs after the Typewriter action.
I tried adding the input element with typewriter effect in a group and resetting data of a group and it did not work since the input gets value from another source.

Maybe I am missing an obvious setup but could not think of it at the moment. :frowning:

If you could help you on this problem am facing. “How can I clear the input value after using typewriter effect on the input” ?
Thank you.

Hello @contantestar,

I tried “Reset relevant inputs” and “Reset Group”. Both are okay. This is the demo page: https://plugin-test-1506.bubbleapps.io/version-test.

You may want to make sure you do something with the input value before triggering the “Reset relevant inputs” action. If you put it into a group, set the initial content to the Parent group’s content so that when you reset the group, the value will be reset.

Hope this helps,
Hugo

1 Like

Hi Hugo, thanks for this plugin. Anyway to make it work with any text element ID? So not only inputs?

Hi @renelonngren1 , I am using the val() function in the code so it only works for input. You can create another plugin and change the value with something like element.innerText so that it will work with any text element.

1 Like

Hi Hugo,
On the original plugin it can work on rich text editor,
Can you also tweak this plugin so that it works on Content Editable and not just Inputs?

Hi @rccanlas2, on the original plugin there is an action that inserts text to Content Editable. However, adding typewriter effect to that action would create many issues so I decided not to include that feature. For most of the use cases, the best way to implement this would be to add custom code directly to the Content Editable element. Feel free to send me a DM if you want to discuss more about this.