将重点放在rails flash消息上答案

【问题标题】：placing focus on rails flash message将重点放在rails flash消息上
【发布时间】：2017-07-18 21:57:55
【问题描述】：

这是一个 rails 控制器重定向语句。

redirect_to "controller_action_path", error: err.to_s

该语句在浏览器的页面源中生成以下 HTML。

<div class="alert alert-danger alert-error" role="alert">"Your alert here"</div>

问题：如何围绕出现在页面顶部的快速响应消息创建焦点。尝试的解决方案：

<% if flash[:error] %>
  <%= javascript_tag do %>
    $('.alert-danger').focus();
  <% end %>
<% end %>

如果 HTML 元素具有 id 标签，则此方法有效。也许如果 HTML 元素也有一个类。似乎静态元素可以接收焦点，但是，由于 flash 错误消息是由 rails 框架生成的并且是动态生成的元素，因此在尝试应用焦点时它没有呈现在表单上，或者它无法在页面的 HTML 中找到该元素。后者似乎不是这种情况，因为调试器返回 $('.alert-danger').focus(); 的 HTML

【问题讨论】：

.alert-danger是什么，你想把焦点放在哪里？

标签： ruby-on-rails rails-flash

【解决方案1】：

Rails 生成静态 html 并将其发送到客户端，因此 Rails 生成的任何内容都会与所有其他 HTML 同时呈现。

尝试将您的控制器代码更改为redirect_to "controller_action_path", alert: err.to_s，并将包装jQuery 函数的条件更改为<%= if flash[:alert] %>。 :error 不是 redirect_to http://api.rubyonrails.org/classes/ActionController/Redirecting.html 的有效选项

我也不认为 jQuery 的条件是必要的。如果没有错误，那么无论如何都不应该有带有该错误类的可见标记。

另外$.focus() 默认情况下不适用于每个元素https://api.jquery.com/focus/

【讨论】：