홈>2020-03-18 14:09

javascript - contenteditable div를 포커스하기위한 for = DIV-ID가있는 HTML (레이블 은 양식 요소 만 지원합니까?)

와이즈 위즈를 주다 HTMLInputElement 그리고 HTMLSelectElement 모두 직접 HTMLTextAreaElement 를 상속 (HTMLFormElement와 같은 일반적인 것은 아니지만) HTMLElement 를 기대합니다. <label> 와 같은 비 필드 요소에 초점을 맞출 수 있습니다. .

그러나 아래 코드 예제는 <div> 를 보여줍니다. <label> 를 정확하게 초점 맞추기 콘텐츠 편집 가능 <textarea> 에 초점을 맞추려면 JS 핵 (예제에서 jQuery 사용)이 필요합니다. .

<div> 에 게시 된 요소 목록이 있습니까? 와 일하다? 또는 contenteditable <label> 의 사용법을 설명하는 문서 에스? 내가 뭔가를 잃어 버렸습니까? 아마 JS가 contenteditable <div> 에 초점을 맞출 필요가 없습니다. ?

<div>

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

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

javascripthtml

답변 # 1
<label> 요소는라벨 가능한 요소와 연결될 수 있습니다.

요소 doc 라벨에서 :
와이즈 비즈 와이즈 비즈 요소와 동일한 문서에있는라벨 가능양식 관련 요소 for 속성 값과 일치하는 id를 가진 문서의 첫 번째 요소는 레이블 가능 요소 인 경우이 레이블 요소에 대해 레이블이 지정된 제어입니다. 레이블을 지정할 수 없으면 for 속성이 적용되지 않습니다. id 값과 일치하는 다른 요소가있는 경우 나중에 문서에서 고려되지 않습니다.

콘텐츠 카테고리 문서에서 :
와이즈 비즈 와이즈 비즈 집단. 포함 와이즈 비즈
for

The id

labelable

Elements that can be associated with <label> <button> <input> ,   그리고 <keygen> .

label
표시 가능한 요소에 대해 게시하려고했지만 늦었습니다. 그러나 여기에 전체를 제공하기 위해 배치했습니다.
와이즈 비즈 와이즈 비즈 집단. 포함   와이즈 비즈 <meter> <output> <progress> <select> <textarea>

labelable

Elements that can be associated with ,   그리고 <label> .

keygen은 더 이상 사용되지 않습니다.

답변의 새로운 점은 무엇입니까? 글쎄, 나는 약간의 해킹을했다 :
```
<button>
```
<input>

Python2.net

javascript - contenteditable div를 포커스하기위한 for = DIV-ID가있는 HTML (레이블 은 양식 요소 만 지원합니까?)

관련 자료