Question

鉴于HTMLInputElement，HTMLSelectElement和HTMLTextAreaElement都直接继承了HTMLElement（而不是像HTMLFormElement这样常见的东西），我希望{{1} }将能够集中非场元素，例如<label>。

但是，下面的代码示例显示了<div>正确地聚焦于<label>的情况，但是需要一个JS hack（在示例中使用jQuery）来聚焦可编辑内容的<textarea>。

是否有<div>使用的元素的已发布列表？还是任何讨论内容可编辑的<label>用法的文档？我是否缺少某些内容，也许不需要JS来关注可编辑的<div>吗？

<div>

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

Answer 1

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

来自label Element doc：

用于

与元素相同的文档中与元素相关的与元素相关的可标记的id。 ID为for属性值匹配的文档中的第一个元素是此label元素的带标签的控件（如果它是可标签的元素）。如果它不可标记，则for属性无效。如果还有其他元素也与id值匹配，那么在文档的后面，将不考虑它们。

来自Content Categories doc：

可标记

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

Answer 2

我打算发布大约labelable个元素-但是来晚了。不过，这里我只是提供完整的内容：

可标记

可以与<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

只需挂钩的“ click”事件，然后将焦点重定向到可编辑内容的控件即可。

$('label[for="' + hiddenControlId + '"]').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 4

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

相反，您可以在可编辑的 div 元素上使用 aria-labelledby 属性，并将其指向用作可见标签的元素上的 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>

带有for = DIV-ID的HTML <label>可以使内容可编辑的div聚焦（label <label>仅支持表单元素吗？）

4 个答案: