How to detect if the caps lock is on?

[boston85719]

I am in the process of following ux design suggestions for a password input…one of those suggestions is to show when the user has caps lock enabled.

Any way to detect if that is the case through bubble or a available plugin?

[troy.roberge]

I’m sure there is a way with JavaScript. It would likely be more lightweight and reliable than a plugin. And likely only need a few lines of code you can probably copy and paste from tutorials on the web? Just a total guess anyway.

[boston85719]

I got the code from 3wschools

I just don’t know how to take what I assume I need ( the script portion ) and turn it into what would be needed for bubble to make use of it. I have the toolbox plugin to use Javascript to Bubble, I just don’t know what I would need to put into the workflow action

I was able to get everything else I wanted to work for the password input except the caps lock recognition

[tim12333]

You wouldn’t use the script in a workflow. You would need to use the expression element that comes with the toolbox.

First set the element ID of your input to myInput.
Inside the if(event.getModifer… function you need to have that function trigger a bubble workflow. You can do this with the toolbox plugin.

Remove text.style.display = “block” and replace with bubble_fn_yourTriggerNameForCapsPressed. The same goes for text.style.display = “none”, replace with bubble_fn_yourTriggerNameForNoCaps

Look up triggering workflows with javascript for more info on that, i’m sure there’s some handy posts.

But basically you just create a Javascript To Bubble element, set the suffix name to one from your expression element (ex. yourTriggerNameForNoCaps), and check trigger event checkbox. Then go add a workflow for when A javascript to bubble event happens.

[boston85719]

Hi @tim12333 thanks for the tips. I’ve tried to implement what you instructed but I am failing at it as I literally have no background in coding and it all is a bit beyond me.

I’ve read through the forum on the subject and despite finding some threads with replies, most are obviously using other JavaScript code and as I am not familiar with it, I am unable to transfer the ideas to my needs.

This is what I have done based on your suggestions. If you could spot the errors I’ve made it would be greatly appreciated.

@tim12333

First set the element ID of your input to myInput .

@tim12333

Remove text.style.display = “block” and replace with bubble_fn_yourTriggerNameForCapsPressed . The same goes for text.style.display = “none” , replace with bubble_fn_yourTriggerNameForNoCaps

@tim12333

create a Javascript To Bubble element, set the suffix name to one from your expression element (ex. yourTriggerNameForNoCaps), and check trigger event checkbox.

@tim12333

Then go add a workflow for when A javascript to bubble event happens.

What I have on the page to demonstrate the function executing correctly is a hidden group that has a text element inside that says the caps lock is on ( first step to test functionality…later would add tooltip or alert )

I know I am doing something wrong as when I load the page I get an error message in the debugger console

At this point it is impossible for me to troubleshoot this as I really have no experience with JavaScript and how to properly execute the functionality using the toolbox plugin.

I believe the triggering an event in the workflow part is the easy bit, but getting the JS code correctly setup for the expression element is what I suspect is my issue.

Any help would be much appreciated.

This is the link to the editor I am working in

Bubble Editor - Blurimagesdirectly

[tim12333]

Everything looks correct except for a couple of things (one of which is my fault). It should be bubble_fn_yourTriggerNameForCapsPressed(); with the (); at the end for both of them.

If you were trying to pass a value into bubble, inside the () is where the value would go
ex. bubble_fn_myNumber(467);

Also I think you need one more closing bracket } at the very end of your expression.

[boston85719]

I don’t know what I am doing wrong, nothing I am changing seems to make it work.

I changed the expression as you mentioned:

input = document.getElementById(“myInput”);
var text = document.getElementById(“text”);
input.addEventListener(“keyup”, function(event) {

if (event.getModifierState(“CapsLock”)) {
bubble_fn_yourTriggerNameForCapsPressed();
} else {
bubble_fn_yourTriggerNameForNoCaps()

}
}

But I get this error message on page load

Which causes me to believe I am missing a bracket “)” because of this portion

So I added an “)”

var input = document.getElementById(“myInput”);
var text = document.getElementById(“text”);
input.addEventListener(“keyup”, function(event) {

if (event.getModifierState(“CapsLock”)) {
bubble_fn_yourTriggerNameForCapsPressed();
} else {
bubble_fn_yourTriggerNameForNoCaps()
)
}
}

But that causes this error to pop up on page load

I had also added the “()” to the end in the bubble suffix portion

So I tried to remove it and then I get this error message

I really have a hard time figuring out what I am doing wrong here as I have no coding experience and all these little necessities of brackets closed or where to put them etc. is so important that without any experience using JS I can’t find the fault in the set up.

[boston85719]

Big thanks to @tim12333 who took time out to get this working for me.

Here is a link to the editor where you can view the code and overall setup to get this functionality

Bubble Editor - Blurimagesdirectly