<label> 带有 for=DIV-ID 的 HTML 来聚焦可内容编辑的 div(标签<label>是否仅支持表单元素？

Question

鉴于HTMLInputElement，HTMLSelectElement和HTMLTextAreaElement都直接继承了HTMLElement（而不是常见的东西，例如HTMLFormelement），我希望<label>能够焦点非场元素，例如 <div>。

但是，下面的代码示例显示了一个<label>，正确聚焦了<textarea>，但需要JS hack（示例中使用的jQuery）才能集中满足可满足的<div>。

是否有<label>可以使用的元素列表？还是任何讨论可满足的<div> s使用的文档？我是否缺少某些东西，也许不需要JS来集中可满足的<div>？

<div>
  <label for="textarea-id" style="font-weight:bold;">Label Text Area</label><br>
  <textarea id="textarea-id">
Editable text
  </textarea>
</div>
<div style="margin-top:20px">
  <label for="contenteditable-id" id="label-for-div-id" style="font-weight:bold;">Label Editable Div</label><br>
  <div id="contenteditable-id" contenteditable="true" style="border:solid 1px black">
    <p>
      <span>Edtiable text</span>
    </p>
  </div>
</div>
<script>
$(function() {
  $('#label-for-div-id').on('click', function() {
    $('#' + $(this).attr('for')).focus();
  })
})
</script>

发布在https://jsfiddle.net/jkvsd03y/5/

Answer 1

<label>元素可以与可标记的元素相关联。

来自标签元素文档：

>标记与该元素同一文档中的 id。文档中的第一个元素具有与for属性值相匹配的ID的第一个元素是该标签元素的标记控件，如果它是可标记的元素。如果不标记，则For属性无效。如果还有其他元素也与ID值匹配，则在文档后面不考虑它们。

来自内容类别的文档：

标记

可以与<label>元素关联的元素。包含 <button>，<input>，<keygen>，<meter>，<output>，<progress>，<select>， 和<textarea>。

Answer 2

我要发布有关可标记元素的文章 - 但迟到了。不过，在这里，我只是为了提供完整：

标记

可以与<label>元素关联的元素。包含 <button>，<input>，<keygen>，<meter>，<output>，<progress>，<select>， 和<textarea>。

请注意，Keygen已弃用。

我的回答中有什么新鲜事物？好吧，我做了一些黑客：

<a href="#contenteditable-id">
  <label for="contenteditable-id" id="label-for-div-id" style="font-weight:bold;">
    Label Editable Div
  </label>
 </a>
<div id="contenteditable-id" contenteditable="true" style="border:solid 1px black">
    <p>
      <span>Edtiable text</span>
    </p>
 </div>

Answer 3

我不建议使用标签元素。它不是有效的HTML，并且实际上没有标记可编辑的DIV元素。

相反，您可以在可编辑的div元素上使用ARIA标记的属性，并将其指向您用作可见标签的元素上的ID。

在下面的摘要中，我还使用旧学校onClick事件属性简化了焦点功能。尽管OP使用了jQuery，但这里不需要。随时忽略那个。

body {
  font: 100%/1.5 sans-serif;
  color: #444;
}
.richtext {
  border: solid 1px currentColor;
  border-radius: 5px;
  padding: 1px 2px;
  display: block;
  box-sizing: border-box;
  resize: both;
  overflow: auto;
}

<span id="notes-label" onclick="document.getElementById('notes-input').focus()">Notes</span>
<div id="notes-input" class="richtext" aria-labelledby="notes-label" contenteditable="true"></div>

Answer 4

只是挂钩＆gt;'s＆quot;事件并将重点重定向到您可满足的控制。

$('label[for="' + hiddenControlId + '"]').on("click", function() {
    // it won't focus immediately after click, so let's focus when this thread is about to finish
    setTimeout(function() {
        $("#contenteditable-id").focus(); // set input focus
    }, 0);
});

Answer 5

使用内联JavaScript，您可以添加到标签标签

onclick="document.getElementById(this.getAttribute('for')).focus()"

示例：

<label for="courriel" onclick="document.getElementById(this.getAttribute('for')).focus()">
    <span id="courriel" contenteditable></span>
</label>

将具有预期行为