Update: The issue was that I was using an animation to show the input in a popup and the display: none to display: block was canceling the focus.
I can’t for the life of me understand why this button doesn’t trigger a focus for me. I’ve tried both jQuery and Javascript variations. I’ve attempted both class and id variations.
I’m unsure if the animation library is hijacking the focus state, perhaps from Webflow.
Here’s a quick demo and the code below:
The ID of the text field:
Selecting the button showing the ID:
Code I’ve tried (not to mention many other variations):
// Version 1 using jQuery
$(document).ready(function() {
$('#searchFocusButton').click(function() {
console.log('button clicked');
const field = $('#searchField');
console.log(field.length);
field.focus() // focus the element
});
});
// Version 2 using jQuery
$(function() {
$("#searchFocusButton").click(function() {
$("#searchField").focus();
})
});
Hi!