使用 ajax 更新表单后自动对焦不起作用答案

【问题标题】：Autofocus not working after updating form with ajax使用 ajax 更新表单后自动对焦不起作用
【发布时间】：2019-04-03 14:26:09
【问题描述】：

在 Rails 5.2 中，我使用 form_with 助手创建了一个表单（我的第一个）。默认为remote: true。

此表单包含一个带有autofocus="autofocus" 的输入。

在出现验证错误后，使用 ajax 返回相同的表单。我用它来更新表格：

document.addEventListener('ajax:success', (event) => {
  const [data, status, xhr] = event.detail;
  const form = document.getElementById('form-signin')
  form.parentNode.innerHTML = xhr.responseText
})

这可行，但现在自动对焦不起作用。（这是第一次）

有没有办法让自动对焦自动工作，还是我应该在上面的 js 代码中手动完成？

一切都适用于local:true，但由于这不再是默认设置，我想尝试新的方法。没有太多关于如何正确处理 ajax 响应的文档。（起初我以为 turbolinks 会为我做这件事）

解决方案： 下面的答案有效，但我找到了一个更好的解决方案，使它更容易。它无需编写自定义 javascript 即可工作： https://github.com/turbolinks/turbolinks-rails/issues/40 https://github.com/jorgemanrubia/turbolinks_render

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-5.2

【解决方案1】：

页面加载时会触发自动对焦，因此如果您的页面已经加载，您将无法获得预期的结果。

当 ajax 调用从回调中完成时，您可以手动聚焦第一个自动聚焦元素，如下所示：

const autofocusedElements = document.querySelectorAll('input[autofocus]');
if (autofocusedElements.length) {
  autofocusedElements[0].focus();
}

【讨论】：

我没想到。很好的解决方案。谢谢。