Given that HTMLInputElement, HTMLSelectElement and HTMLTextAreaElement all directly inherit HTMLElement (and not something common, like a HTMLFormElement), I'd expect that <label> would be able to focus non-field elements such as a <div>.

However, the code example below shows a <label> correctly focusing a <textarea>, but requires a JS hack (used jQuery in the example) to focus the contenteditable <div>.

Is there a published list of elements that <label> works with? Or any documentation that discusses the usage of with contenteditable <div>s? Am I missing something, maybe JS is not needed to focus the contenteditable <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>

Posted at /

Given that HTMLInputElement, HTMLSelectElement and HTMLTextAreaElement all directly inherit HTMLElement (and not something common, like a HTMLFormElement), I'd expect that <label> would be able to focus non-field elements such as a <div>.

However, the code example below shows a <label> correctly focusing a <textarea>, but requires a JS hack (used jQuery in the example) to focus the contenteditable <div>.

Is there a published list of elements that <label> works with? Or any documentation that discusses the usage of with contenteditable <div>s? Am I missing something, maybe JS is not needed to focus the contenteditable <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>

Posted at https://jsfiddle.net/jkvsd03y/5/

• javascript
• html

• @BhojendraRauniyar tabindex does NOT solve problem in this case – Kamil Kiełczewski Commented Feb 20, 2019 at 17:35
• ah, I misunderstood the question. – Bhojendra Rauniyar Commented Feb 20, 2019 at 17:38

5 Answers 5

<label> elements can be associated to labelable elements.

From the label Element doc:

for

The id of a labelable form-related element in the same document as the element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.

From the Content Categories doc:

labelable

Elements that can be associated with <label> elements. Contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

I was going to post about labelable elements - but was late. Though, here I'm just placing for providing it full:

labelable

Elements that can be associated with <label> elements. Contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

Note that keygen is deprecated.

What's new in my answer? Well, I did a little hack:

<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>

I don't recommend using a label element. It's not valid HTML and it doesn't actually label the editable div element.

Instead, you can use an aria-labelledby attribute on the editable div element and point it to an ID on the element you use as your visible label.

In the snippet below I also simplified the focus functionality by using an old school onclick event attribute. Although the OP used jQuery, it isn't necessary here. Feel free to ignore that bit.

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>

with inline javascript, you can add to your label tag

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

example :

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

will have the expected behavior

Just hook <label>'s "click" event and redirect focus to your contenteditable control.

$('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);
});