expressJS/ejs 上的 trix 自动对焦问题

Question

我正在使用 NodeJS/Express 构建一个博客，并使用 Trix 编辑器来处理博客文章的编写和编辑。在尝试编辑后矩阵富文本区域时自动聚焦；不允许对页面上的其他文本区域进行任何编辑。

以下是添加了 Trix 编辑器标签的编辑帖子页面的 EJS 代码

  <form action="/edit-post/<%= data._id %>?_method=PUT" method="POST" autofocus ='false'>
      <label for="title"><b>Title</b></label>
      <input autofocus="true" type="text" placeholder="Post Title" name="title" value="<%= data.title %>">


     
      <label for="body"><b>Content</b></label>
      
       <input id="x" type="hidden" name="body"" autofocus="false"> // here is where the issue happening 
      <trix-editor input="x" autofocus="false"> <%= data.body %> </trix-editor>
      <input type="submit" value="Update" class="btn">
  </form>

如何解决这个问题？

Answer 1

autofocus 属性并不意味着在彼此相邻的多个元素上指定。此外，该属性与 所有其他布尔属性一样，不接受

true

或

false

作为值。

正如 HTML5 规范在其关于布尔属性的页面上所描述的那样：

元素上存在布尔属性表示真值，不存在该属性表示假值。如果该属性存在，则其值必须是空字符串或与该属性的规范名称匹配的 ASCII 不区分大小写的值，并且没有前导或尾随空格。

意味着布尔属性只能通过三种方式设置

<textarea autofocus></textarea>
<textarea autofocus=""></textarea>
<textarea autofocus="autofocus"></textarea> <!--could also write `autofocus="aUtOfOcUs"`-->

将元素的属性设置为 false 的唯一方法是不存在该属性。

某些浏览器可能仍然接受任何值，正如 MDN 文档在其有关布尔属性的页面上提到的那样：

虽然现代浏览器将任何字符串值视为 true，但您不应该依赖这种行为。

另外，关于

autofocus

属性，在同一文档或 dialog 中不应有超过 1 个具有 autofocus 属性的元素：

文档或对话框中最多只能有一个元素具有自动对焦属性。如果应用于多个元素，第一个元素将获得焦点。

因此，您应该只将该属性放在您想要专注于页面加载的元素上。

阅读有关布尔属性和自动对焦的更多信息的链接：

• Stackoverflow问题
  • 是autofocus=“autofocus”还是自动对焦？
  • “option”标签的“selected”属性中可以出现哪些值？
• MDN 文档
  • 自动对焦：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  • 布尔属性：https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML
• HTML5 规范 (W3)
  • 自动对焦：https://html.spec.whatwg.org/multipage/interaction.html#the-autofocus-attribute
  • 布尔属性：https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute