自动聚焦于联系表7的首次输入

Question

我试图在页面加载时将光标插入到表单的第一个input（或上一页的onclick）。

基本上，我在主页上有一个链接以“立即查询”，我需要它单击以转到联系页面，向下滚动到我的锚点，并在表单的第一个元素上focus()。我已经尝试过document.getElementById('____').focus();，但只有在您已经在页面上时，它才有效。

这是我在主页上的按钮：

<a href="/contact-us#contact"><button class="cta purple">Enquire Now</button></a>

这是我在联系页面上的输入：

<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="first" aria-required="true" aria-invalid="false" placeholder="Name"></span>

这可能是内联的吗？类似于document.getElementById('____').focus();，但要换一个新页面？还是唯一的选择是jQuery“页面加载”解决方案？

Answer 1

1. 最简单的方法是将HTML与autofocus attribute一起使用

 <input type="text" name="your-name" autofocus>

1. 或者如果您想使用javascript（jquery）

$( document ).ready(function() {
    $('#first').focus();
});

1. 香草javascript

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#first').focus();
});