Triggering interaction using a keyboard input

Community resources Webflow Tips
1

After a bit of research, I have figured out how to trigger a Webflow interaction using a key press or keyboard input.

Insert the following code before the </body> tag on your page:

<script>
      	$(document).on('keyup', function(event) {
      	if (event.which === 27) {
         	$('.CLASS-NAME').click();
       		}
        });
 </script>

You should replace ‘class name’ with the class of the element that would normally activate the trigger. Something like ‘popup-close’.

You should also replace ‘27’ with the number that represents the key you want to trigger the interaction. Find the key here.

Please note that this will only trigger ‘click’ interactions. It works by simulating a users click on an element, rather than directly triggering the interaction itself.

8 Likes
2

Nice tip @JSW.

Thank you for sharing with the community!

1 Like
3

I want to continue this old conversation because I had to go through a million threads to find this ONE simple solution to my focus issue … I have a trigger that opens a form when an H2 title is pressed. This works flawlessly with the trigger interactions in webflow but for Accessibility click through NOTHING worked. Aria labels - random other things I found in so many forum spaces. This solution needs to be highlighted and the problem that webflow has with ease of adding accessibility is honestly shameful for a company that has been in business since 2013 – it’s 2020 … and we are having to spend DAYS researching solutions for accessibility on this otherwise awesome tool! Ya’ll should kind of be ashamed of yourselves… and thanks @JSW for saving my ever loving life today with this fix!!!

1 Like
4

Exactly what I was looking for, thank you.

PS it would be nice if Webflow offered a key press as an interaction trigger.

2 Likes
6

Does anyone know how to make this work for more than one instance on a page? As in, how can I set it up so that all my click-driven interactions will be triggered with this code? As of now, I got it to work but only once. It won’t apply to multiple classes.

7

Since most browsers have deprecated event.which use event.key instead.
The same link shows .key values as well.
It should look something like this (event.key === 'Escape')

Also note your elements class needs to be in all lowercase.

Thanks for sharing, this was super helpful and worked like a charm once updated!

8

I try to use this but when I press the key in my keyboard, it still doesnt work, can I get help?

9

Screenshot 2024-06-08 at 9.02.13 PM
Screenshot 2024-06-08 at 9.02.13 PM976×292 23.9 KB

Make sure you replace the spaces in the element class with dashes.

1 Like
11

Not sure if this have been implemented natively in webflow yet but i found some simple way to do it globally for better accessibility I guess (generated with IA)

If you’re using a div or custom element and want it to act like a button:

Step 1: Add Attributes Manually

  1. Select your element (e.g., a div block).
  2. Go to the Settings panel (gear icon).
  3. Add these attributes:
  • tabindex = 0 → makes it focusable
  • role = button → tells screen readers it’s a button

Step 2: Add Custom Code

Use an HTML embed or Page Footer <script> to add this:

document.querySelectorAll('[role="button"]').forEach(el => {
  el.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault(); // prevents space from scrolling
      el.click(); // trigger the click/tap action
    }
  });
});

Step 3: Add Webflow Interaction

  • Create a Click/Tap interaction on the element. That same action will be triggered by Enter or Space now.