I want to fire an interaction when a form field is selected. Using a ‘Click’ trigger works fine when users select the field with their mouse, but it does not work when the user tabs through the form with their keyboard.
Any ideas?
Thank you!
Here is my public share link: LINK
(how to access public share link)
Hi Alex!
You can see an example here:
http://kabbage-demo.webflow.io/tcpa
When the ‘Business Phone’ field is selected, I want to show a div with text.
(In the link above, clicking the field triggers the demo. Ideally, I would like to change that click interaction into an interaction triggered by selecting the field)
Cool! You actual don’t need any interactions to do this.
You can write some CSS and put it into the head tag for that page. Since a click and and using a tab both cause the input to be focused we can use the focus state and a sibling selector to alter the div.
Make sure to remove the the interaction and set the div height to zero. You won’t be able to see it work until it’s published.
Here is a working example.
https://preview.webflow.com/preview/focus-sibling?preview=30fc21d74704cbd62a5248874060cc81
Here it is live.
http://focus-sibling.webflow.io/
<style>
.your-field:focus ~ .your-div {
height:100px;
}
</style>
Brilliant! You saved the day. Thanks, @AlexN
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.