javascript - 使用 ajax 更新表单后自动对焦不起作用
问题描述
在 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
解决方案
页面加载时会触发自动对焦,因此如果您的页面已经加载,您将无法获得预期的结果。
当 ajax 调用从回调中完成时,您可以手动聚焦第一个自动聚焦元素,例如:
const autofocusedElements = document.querySelectorAll('input[autofocus]');
if (autofocusedElements.length) {
autofocusedElements[0].focus();
}
推荐阅读
- c# - 如何从 xmlnode C# 获取内部文本
- terminal - wget -v -t=5 --no-clobber -x http://www.website.com/ 当我在终端运行这个命令时,这个网站会发生什么?
- node.js - 无法使用纱线在 Laravel 中安装 UIkit 3
- node.js - 使用正则表达式在 Couchdb 查找请求上出现无效的 UTF-8 JSON 错误
- kotlin - Kotlin:获取另一个范围内的范围值
- airflow - 您如何访问 Airflow Web 界面?
- c# - 为每一行调用存储过程不起作用
- xamarin.forms - 直观地编辑 Xamarin 表单页面
- html - 为什么html的嵌套列表不起作用?
- go - 在go中将接口转换为float32