Question

我要求的建议不仅仅是一个真正的问题。我想使用更合适的方法而不是限制来解决我的问题。

我有一个DIV包含的文字和一个button，可以在其上切换“contenteditable”属性，以使其可编辑。显然，我可以在页面中拥有多个“button-div”。

<button class='toggle-edit'>Start Editing</button>

<div id='div-to-be-edited' contenteditable='false'>
  ...
</div>

我需要链接按钮到其相对可编辑的div，我想到了rel属性或自定义aria属性，如：

<button class='toggle-edit' rel='div-to-be-edited'>Start Editing</button>

或

<button class='toggle-edit' aria-edit-div='div-to-be-edited'>Start Editing</button>

我的想法是通过jQuery，rel或aria-attribute点击按钮拦截，然后将contenteditabile属性应用于相对DIV。

问题是这些属性似乎没有被特定的目的考虑在内。你能建议我最干净的解决方案吗？

谢谢。

Answer 1

button元素不能具有rel属性（您可以easily check yourself），而WAI-ARIA does not可以定义aria-edit-div属性。

我没有经验，但也许（！）aria-controls attribute是合适的：

标识其内容或存在由当前元素控制的元素（或元素）。

看起来像是：

<button class="toggle-edit" aria-controls="div-to-be-edited">Start Editing</button>
<div id="div-to-be-edited" contenteditable="false"></div>

然而，严格意义上讲，使元素可编辑可能不会控制“内容或存在”。因此在使用之前请检查它是否合适。

如果aria-controls不合适，我认为没有替代方案。在这种情况下，您必须使用不传达任何含义/关系的属性，这意味着class或id或else data-*：

<button class="toggle-edit" data-controls="div-to-be-edited">Start Editing</button>
<div id="div-to-be-edited" contenteditable="false"></div>

Answer 2

你不应该使用你正在考虑的任何属性，因为它们正式无效且实际上无用（或者，理论上，更糟糕的是：未来的某些规范可能为它们赋予意义，可能与您的想法有很大不同，可能只是关闭足以造成混乱）。

唯一相关的属性是role=button，但无论如何它都是button元素的默认属性。请参阅WD Using WAI-ARIA in HTML。

HTML中没有办法说“这个按钮影响那个元素”，这似乎就是你所追求的。这些事情应该在用户界面中口头解释，或者在所有浏览模式中都很明显。