[New plugin] Instant Text

Hi Bubblers!

We’ve released a new plugin on our widgets website called “Instant Text” (made by @gaurav).

Instantly get the live text from an input field without waiting for that slight delay from bubble in recognizing the entered value. Can be used for application such as displaying number of characters entered in real-time.

Enjoy!

Stephanie
AirDev | Custom software for everyone

17 Likes

This is fantastic :grinning:

Awesome, been looking for something like this.

4 Likes

Thanks for the plugin, and for showing that is possible. It’s true that there is a delay undercutting the UX. For instance, when enabling a form button only when an input is not empty.
Couldn’t @Bubble integrate this “instant text” natively ?

4 Likes

Strange issue with this plugin recently…is it working on NEW pages for others? I say NEW because I have a page in production still working, but in dev I can’t get things working again. Debugger shows that the instant text element has no value.

Appreciate any thoughts on this!

Here’s a sample page with nothing else on it to demonstrate problem:

39%20AM


https://bubble.io/page?type=page&name=instant-text&id=toh-samples&tab=tabs-1

Not working for me either in some pages. It’s kind of erratic. I have some custom JS on some so it might be that.

Good to know I’m not alone…thanks @JonL

I thought conflicts as well, but the sample page seemed to rule that out, so I’m stumped.

1 Like

@gaurav @stephanie Any chance you can help troubleshoot this?

Second question for you @gaurav and @stephanie - I’m using instant text for a search and it’s great. However, the input has an “x” icon to clear the input. When I clear the input using Reset Data then the input is cleared and not focused (desired outcome) but LiveText Element still retains the original typed text so the search results are now incorrect. I’ve tried any element actions I can think of, I’ve tried putting it in a group and resetting that, I simply can’t find a way to reset the Livetext Element’s value unless I force the user to backspace to clear all the characters. Am I missing something?

I spoke too soon. I can LiveText to reset it using a conditional to set the Text="" when the input’s value is empty … why do I never think of the simple things until after I’ve exhausted myself trying all the complex ones?

2 Likes

Just added an action to clear the value :slight_smile:

3 Likes

Cant really debug as ur page is read only.
I suggest make the livetext plugin element visible not by default but when page loaded (entire) and then try?

2 Likes

PERFECT! That does the trick. Thanks @gaurav

1 Like

This plugin is so great when used for an Input with Search and AutoCorrect to display RG content. It is so fast you don’t feel the ‘lag’ that you do otherwise. Love it and thanks for the reset action.

1 Like

Always happy to make life a little bit easier for bubblers :smile:

2 Likes

Hi @gaurav,

A nice addition to this little but so convenient plugin would be to add a custom event “A Livetext change”.

Right now what I’m using is a “javascript to bubble” plugin event to catch a real-time change on an input using the on method which is probably the base of your plugin.

$( “#id”).on(“input”, null, null, function(){
bubble_fn_catch( );
});

However this workaround is over-complicating things and adding additional elements and workflows to an already saturated one-page app.

Do you think you could add this custom event to instant text?

Best

1 Like

@gaurav - I’ve looked everywhere for the action to reset the Livetext element’s value. Can you give me a clue please?

EDIT: Don’t worry when i closed and reopened my browser it was there waiting for me :slight_smile:

2 Likes

Hi @gaurav, Thank you for this awesome plug in. However, I am currently experiencing a problem.

I am using the plugin to count the number of characters in an input (max 65 characters) of a form that the user completes. For example, the user would type 25 characters long and the count could read “40 characters remaining” as expected. However, when a user returns to the form to change their input the initial content of the character count is 65 (and not 40). Only when a change to the input is made does it display the correct character count. I would want the correct count to show on page load (40 and not 65).

I have tried changing the initial content with a conditional as in the screen shot below, but this does not work and starts counting into the negatives.

Is there a way to show the accurate character count on a page load?

@gaurav great plugin. Is it possible to use LiveText’s value as a number?

If I have an integer input and want to display input/2 using livetext - how would I do that?

@gaurav @stephanie @vlad
This is one of the TOP 10 plugins for Bubble! Great job.

2 Likes