# \[NEW PLUGIN\] Keystroke Input Trigger

**URL:** <https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525>\
**Category:** Showcase\
**Created:** [August 4, 2019, 2:38pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525 "2019-08-04T14:38:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 2:38pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/1 "2019-08-04T14:38:22Z")

</div>

[Keystroke Input Trigger (Plugin Page)](https://bubble.io/plugin/1564853448881x747480271658418200)

Triggers a workflow as you type individual keystrokes into an input or a set time after you’ve stopped typing. Unlike bubble’s ‘on input change’ trigger, the plugin will trigger a workflow on any real-time change to an input without the need to click outside of that input field.

Adjustable timeout lets you define how long between keystrokes the workflow should trigger.  
  
[DEMO PAGE](https://inputchangetrigger.bubbleapps.io/)

Was built as a problem-solver for my own app and it seemed worthwhile to share.

Enjoy!

EDIT:  
Quick question to any plugin devs stumbling across this thread: How do you deal with placeholder images? Bubble recently upgraded how plugins render inside the editor, but also simultaneously removed the simplified way to upload a static placeholder image. I attempted recreate their Jquery example and it did not work…

---

<div class="post-metadata">

**Author:** ![eli](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eli/32/42610_2.png) [@eli](https://forum.bubble.io/u/eli)\
**Post date:** [August 4, 2019, 4:07pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/2 "2019-08-04T16:07:28Z")

</div>

Dude, this is amazing! Great merge between autobind and on input change.

---

<div class="post-metadata">

**Author:** ![sat\_miha](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sat_miha/32/58187_2.png) [@sat\_miha](https://forum.bubble.io/u/sat_miha)\
**Post date:** [August 4, 2019, 4:29pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/3 "2019-08-04T16:29:19Z")

</div>

Thank you for your effort, but can you give an example where it can be used?

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 4:40pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/4 "2019-08-04T16:40:35Z")

</div>

Thanks! It seemed like an obvious need and a straightforward solution. I was surprised that this hadn’t been done already. Given how crappy the search inside the plugin tab is, I’m not convinced someone _hasn’t_ built a plugin that can do this already 😉

Side note:  
I feel like I should mention, that there are many scenarios in bubble (more than one may first realize) that do _not_ require a plugin like this. Between the ‘conditional’ tab, triggering workflows based on page conditionals and using _Input’s value_ inside a data source you can get a lot of the ‘real time’ interaction on a page with your input field as you type _without a plugin like this_.

That being said, depending on your project, there can be a very real need for this.

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 4:51pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/5 "2019-08-04T16:51:21Z")

</div>

> [@sat\_miha](#):
>
> Thank you for your effort, but can you give an example where it can be used?

Bubble auto binding doesn’t update changes inside the text input field to your database until you click out of that field on the page and cause it to loose focus. Real world scenario: Let’s say you had a long input field in your page and the user was typing in a paragraph or more of information. That information is not saved in the database until the user clicks out of the field. If they were to say shut their laptop and it ran out of battery and shut down (forcing the browser to close) unlike, say gmail, their input would not have been saved.

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 5:03pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/6 "2019-08-04T17:03:28Z")

</div>

> [@jon2](#):
>
> Bubble auto binding doesn’t update changes inside the text input field to your database until you click out of that field on the page and cause it to loose focus.

BTW, there is a sound reasoning for keeping with this standard update behavior. I would caution anyone from repeatedly writing to the db while they type without understanding the implications of that 🙂

---

<div class="post-metadata">

**Author:** ![luke2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/luke2/32/256674_2.png) [@luke2](https://forum.bubble.io/u/luke2)\
**Post date:** [August 4, 2019, 6:15pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/7 "2019-08-04T18:15:48Z")

</div>

Nice work @jon2 👍

I’ve changed the topic of this post to ‘Showcase’ as this fits in better, hope thats okay.

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [August 4, 2019, 7:06pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/8 "2019-08-04T19:06:20Z")

</div>

It’s usefulness is great for searches.

---

<div class="post-metadata">

**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\
**Post date:** [August 4, 2019, 7:07pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/9 "2019-08-04T19:07:12Z")

</div>

> [@jon2](#):
>
> How do you deal with placeholder images? Bubble recently upgraded how plugins render inside the editor, but also simultaneously removed the simplified way to upload a static placeholder image.

There might be other ways to do it, but what I found works is uploading the placeholder image in the plugin’s **Shared** tab under **Shared assets and resources** and then adding the following to the element’s **preview** function. (Play around with width and height if you want different dimensions or for it to be resizable.)

```auto

function( instance, properties )
{
    var img = $('<img>').attr('src','//dd7tel2830j4w.cloudfront.net/f1564848404485x678477926193473200/my-placeholder.png');
    img.css({
        position : 'absolute',
        width : 60,
        height : 60
    });
    instance.canvas.append( img );
}

```

> [@jon2](#):
>
> I’m not convinced someone _hasn’t_ built a plugin that can do this already

The closest thing I’m aware of is [AirDev’s Instant Text plugin](https://bubble.io/plugin/instant-text-1527871417291x467091680897007600). The delay is not configurable though; it’s just instantaneous as you type.

I also developed something similar for my own internal use. Not sure yet if I’ll release it to the marketplace.

Nice job with the plugin. 🙂

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 7:25pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/10 "2019-08-04T19:25:07Z")

</div>

> [@luke2](#):
>
> I’ve changed the topic of this post to ‘Showcase’ as this fits in better, hope thats okay.

Thanks!

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 7:32pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/11 "2019-08-04T19:32:40Z")

</div>

> [@nocodeventure](#):
>
> It’s usefulness is great for searches.

Absolutely. That was the initial motivation for building it. I’ve found though, that I’ve been able to build some fairly decent ‘real-time’ search capabilities (of the db at least) using the built-in functions available in the editor.

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 4, 2019, 7:50pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/12 "2019-08-04T19:50:08Z")

</div>

> [@sudsy](#):
>
> function( instance, properties ) { var img = $(‘ ![]()’).attr(‘src’,‘[//dd7tel2830j4w.cloudfront.net/f1564848404485x678477926193473200/my-placeholder.png](https://dd7tel2830j4w.cloudfront.net/f1564848404485x678477926193473200/my-placeholder.png)’); img.css({ position : ‘absolute’, width : 60, height : 60 }); instance.canvas.append( img ); }

That did it.  
Thanks!

I understand why the new live plugin preview is better, but it’s frustrating that @bubble removed a working feature, didn’t document it, and left users to figure this out.

If you review nearly any plugin you’ll see that the page elements render correctly in the editor with a static placeholder image, however when you look at the code there is nothing under the preview section and no placeholder. Thats broken.

---

<div class="post-metadata">

**Author:** ![hgm.business](https://avatars.discourse-cdn.com/v4/letter/h/71c47a/32.png) [@hgm.business](https://forum.bubble.io/u/hgm.business)\
**Post date:** [August 10, 2019, 3:42pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/13 "2019-08-10T15:42:04Z")

</div>

I tried it this morning, but it doesn’t seem to be more responsive than the input’s existing workflow, no matter what timer value I used. It also doesn’t trigger the function to watch workflows step-by-step once I started typing. I was saving its output as two states in a group (the output as text as well as the output’s text’s character count), but I think I couldn’t see the variables getting updated when using the ‘inspect’ function. It did work and I used a workflow like in your example. I might try it again in a separate page to see if that has an effect.

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 11, 2019, 5:07pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/14 "2019-08-11T17:07:43Z")

</div>

> [@hgm.business](#):
>
> it doesn’t seem to be more responsive than the input’s existing workflow

I’m not sure what you are referring to by ‘existing workflow’? If you have an existing workflow that works (without this plugin), then its unlikely that this plugin will give you some sort of increased performance. I’d take a look at the plugin page for a detailed description of the features.

> [@hgm.business](#):
>
> It also doesn’t trigger the function to watch workflows step-by-step once I started typing

Maybe someone can help me out here, but I believe this is a bubble limitation? I don’t believe bubble allows step-by-step inspection of a workflow that was triggered after page load by either a condition or a page plugin triggering an action… At least I’ve not experienced this working before.

---

<div class="post-metadata">

**Author:** ![seooffice.a](https://avatars.discourse-cdn.com/v4/letter/s/b3f665/32.png) [@seooffice.a](https://forum.bubble.io/u/seooffice.a)\
**Post date:** [August 12, 2019, 12:15pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/15 "2019-08-12T12:15:43Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [August 19, 2019, 9:06pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/16 "2019-08-19T21:06:15Z")

</div>

- Added a ‘currently typing’ yes/no state. This fires _yes_ on a key down press and then reverts back to _no_ after an independently adjustable timeout period.
- Added a ‘start typing’ trigger which occurs on the first down keystroke. Has a separate adjustment for timeout after typing stops before firing again. Also allows for repeats if set to 0.

Might be useful for a chat status, conditionally visible elements, etc. [demo page](https://inputchangetrigger.bubbleapps.io/)

---

<div class="post-metadata">

**Author:** ![timsymington](https://avatars.discourse-cdn.com/v4/letter/t/e495f1/32.png) [@timsymington](https://forum.bubble.io/u/timsymington)\
**Post date:** [November 7, 2019, 10:58pm UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/17 "2019-11-07T22:58:46Z")

</div>

Hi there -

Thanks for the plugin, this is great. Have you figured out a way to get this working when the monitor and the input are in a repeating group? When I’ve tried this I’ve only gotten it to work on the first cell. Thanks!

---

<div class="post-metadata">

**Author:** ![manikandan](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@manikandan](https://forum.bubble.io/u/manikandan)\
**Post date:** [November 26, 2019, 11:45am UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/18 "2019-11-26T11:45:05Z")

</div>

Hi @jon2,  
Kindly please fix the console on initially loading the page.  
“instance.data.init\_complete undefined”

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [November 27, 2019, 9:12am UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/19 "2019-11-27T09:12:27Z")

</div>

I think the Plugin is broken. Both in my app and demo page it isn’t updating the text. I needed this for an invoice app 😉

---

<div class="post-metadata">

**Author:** ![jon2](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jon2](https://forum.bubble.io/u/jon2)\
**Post date:** [December 5, 2019, 12:23am UTC](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525/20 "2019-12-05T00:23:29Z")

</div>

> [@manikandan](#):
>
> Kindly please fix the console on initially loading the page.  
> “instance.data.init\_complete undefined”

and

> [@nocodeventure](#):
>
> I think the Plugin is broken. Both in my app and demo page it isn’t updating the text. I needed this for an invoice app 😉

Please send me a pm to your app’s editor so I can take a look at what you are seeing.

[Next page](https://forum.bubble.io/t/new-plugin-keystroke-input-trigger/63525.md?page=2)