Hi @jon2,
I checked today, It was working fine. May i know, why this could happen previously?
Why would I do that? Your demo page environment has the same issue.
Is there a way to have the monitor work on an input that I change without typing? I’m using javascript to change an input field’s value, but the monitor isn’t updating the input’s new value. Is there a way to manually recheck/update the input’s value?
This plugin uses a javascript event listener to monitor key presses inside a field so it wouldn’t be able to monitor the value of that field changing without typing it in, unfortunately.
I’ve toyed around with adding this feature and unfortunately its not an easy or straightforward. This has to do with the capabilities of the JavaScript language and the way ‘events’ work. JS events let us trigger workflows when things happen in JS land and there is no event for an input’s value changing ‘on its own’ without a user doing something first.
Sufficed to say, to do what you want to do, you would need to continuously poll (check) each input and if the value has changed, do something. Its a little far outside the scope of this plugin and so I wouldn’t incorporate it.
That being said, I found this which could be a good jumping off point if you and/or a dev are looking to research and build something with custom JS in toolbox or a plugin
Hi @jon2,
Your plugin of image preview code getting timeout on the Bubble app editor. Kindly please update
how i can reset the input monitor output text value after a certain action ? Thx so much
Thanks for your precious suggestion.
I just posted an update.
- Added action to manually set the ‘output’ text.
- Fixed Editor Icon (Better late than never)
Hi. I can’t make this plugin work in repeating groups. Can you tell me if it’s possible? I use it for the cart to change the quantity.
Ps thanks for the plugin. Works great in the product card.
I haven’t tried it for RGs. The plug-in respects elements on the page which have unique IDs
Here’s why it’s difficult with RGs:
You need to name each element predictably and uniquely. You can do this by giving it an id prefix with a unique suffix that matches the row index number
Example:
Id= quantity_current cells index
You can place an keystroke trigger element in each row to catch the strokes of each input field, but there’s a scope limitation with element events that originate from within a RG in that they can’t ‘talk’ / access some of the page page-level workflows and variables. Furthermore there may be an issue with the way elements are loaded as each row is loaded meaning they aren’t ‘ready’ for the plug-in to start monitoring and therefor may fail monitor—you’d have to play around with it.
The plug-in isn’t sophisticated enough to circumvent or work well with these built in RG limitations without some kind of workarounds.
Thank you for the quick and clear answer.
The dynamic item id option worked for me. The stability is good too.
up until now it worked great. Now the plugin is throwing an error, specifically Cannot set property ‘onkeydown’ of null
at init (PLUGIN_Keystroke-Input-Trigger-update–input-monitor-.js:33:39)
at root (PLUGIN_Keystroke-Input-Trigger-update–input-monitor-.js:33:39)
This sounds like the plugin cannot find your page element using its ID.
If it was working and now it isn’t I would check:
- the ID is still correct
- that the element you are monitoring is set to visible and is loading before the plugin attempts to find it for the first time.
- the ID is unique on the page – i.e. you didn’t copy the element (and it’s specified ID) to multiple places
In fact the element was actually hidden on the page load. By fixing it the error disappeared.
@jon2
Thank you for hsaring the link.
Well it looks like what exactly i was looking for. I have checked the demo page.
When i’m following this exact steps i’m getting below error in debugging.
Bug in custom code TypeError: Cannot set properties of null (setting ‘onkeydown’)
** at init (PLUGIN_1564853448881x747480271658418200/Keystroke-Input-Trigger-update–input-monitor-.js:33:39)**
** at root (PLUGIN_1564853448881x747480271658418200/Keystroke-Input-Trigger-update–input-monitor-.js:33:39)**
And may be because of that its not working.
The element for which i want to set this monitor for is inside Repeating group.
Does that causing an error. How can use this plugin for input fileds which are inside of RG.
Can you help me with this?
Thank you
Hi @jon2
This plugin is working fine for me for the inputs which are on page. But i want this ti work for me when input filed which is inside of the repeating group. Please look into this. I need to work this as early as possible.
Looking forward for help.
Thank you
Hello, @jon2
I installed your plugin, set up it in my app yesterday. It works good. After that, I updated Bubble version to 20 and your plugin can’t work anymore. I have revert back bubble version to 19, but your plugin didn"t work. Can you check it, what’s the problem? Maybe need some optimization of plugin?
Quick question: I am using your plugin to replace each keystroke with a symbol in input fields, for social security/ID numbers. I have successfully produced…….(drumroll)…. One asterisk for the first keystroke. However, I cannot get it to add an asterisk for each keystroke. (Mostly because I have coded: document.getElementById(“ssn”).value = “” So every keystroke, it takes the full value of the input and makes it “”. I need one for every digit and can’t quite work out how to do that. Anyone have any thoughts on this? Anything you can throw my way to point me in the right direction would be greatly appreciated. (The problem is my lack of coding experience, not the plugin as I am getting it to console log at every key stroke.)
you could append the asterisk on the second (!) time:
document.getElementById("ssn").value = document.getElementById("ssn").value + “*”;
Thank you @jon2 ! I’m surprised there wasn’t a keystroke option built-in to Bubble.io, your plugin worked exactly as expected.
Much appreciated from a beginner, I used it so when a user types in my search input, the results will show up below as a Focus Group combined with the “Fuzzy Search & Autocomplete” plugin.