div contenteditable 요소에 초점 설정

div contenteditable 요소에 초점 설정

---

나는 <div contenteditable=true>WYSIWYG에 의해 몇 가지 요소를 정의 하는 곳 이 있습니다 . 예를 들어 <p>, <h1>등입니다.이 요소 중 하나에 직접 초점을 맞추고 싶습니다.

예를 들어 <p id="p_test">. 하지만 focus()기능이 <div>요소, <p>요소 에서 작동하지 않는 것 같습니다 .

제 경우에 초점을 정의하는 다른 방법이 있습니까?

---

이전 게시물이지만 어떤 솔루션도 나를 위해 일하지 않았습니다. 나는 결국 그것을 알아 냈습니다.

var div = document.getElementById('contenteditablediv');
setTimeout(function() {
    div.focus();
}, 0);

---

최신 브라우저에서는 다음을 사용할 수 있습니다.

var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
r.setStart(p, 0);
r.setEnd(p, 0);
s.removeAllRanges();
s.addRange(r);

그러나 요소가 비어 있으면 이상한 문제가 있으므로 빈 요소에 대해 다음을 수행 할 수 있습니다.

var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
p.innerHTML = '\u00a0';
r.selectNodeContents(p);
s.removeAllRanges();
s.addRange(r);
document.execCommand('delete', false, null);

nbsp를 삭제 한 후 커서가 p 요소 안에 남아 있습니다.

추신 : 평범한 공간이 나를 위해 작동하지 않습니다.

---

jQuery focus ()가 너비와 높이가 0 인 contenteditable DIV에 대해 작동하지 않는다는 것을 알았습니다. 기본 자바 스크립트 포커스 메서드 인 .get (0) .focus ()로 대체했고 작동합니다.

---

요소 를 관리 하는 MediumEditor 를 사용하는 누군가 contenteditable가이 문제를 발견하면 다음이 저에게 효과적 이었습니다.

editor.selectElement(editorDOMNode);

1. editor의 인스턴스입니다 MediumEditor.
2. editorDOMNode실제 contenteditableDOM 노드에 대한 참조 입니다.

3. 다음과 같이 편집기 내의 특정 자식 노드에 집중할 수도 있습니다.

   editor.selectElement(editorDOMNode.childNodes[0]);
   

---

이 코드를 시도해 볼 수 있으며 마지막 삽입 위치에 자동으로 초점을 맞출 수 있습니다.

let p = document.getElementById('contenteditablediv')
let s = window.getSelection()
let r = document.createRange()
r.setStart(p, p.childElementCount)
r.setEnd(p, p.childElementCount)
s.removeAllRanges()
s.addRange(r)

---

.focus()요소를 호출 할 수없는 경우 는 대부분 tabIndex가 -1이기 때문입니다. 즉, Tab을 눌러 탐색 할 때 탭 키가 해당 요소에 초점을 맞출 수 없음을 의미합니다.

tabIndex를> = 0으로 변경하면 요소에 집중할 수 있습니다. 동적으로 수행해야하는 경우 이벤트 리스너의 요소에 tabindex> = 0을 추가하기 만하면됩니다.

---

"click"이벤트 핸들러를 contenteditable div 내의 모든 요소에 바인딩하고 클릭시 클래스 / 스타일을 변경합니다 (예 : 요소에 "focused"클래스 추가).

다채로운 테두리 또는 내부 상자 그림자와 같은 스타일을 추가하여 사용자가 어떤 요소에 포커스가 있는지 식별 할 수 있습니다. 그런 다음 jQuery 스크립트에서 포커스가있는 요소에 액세스하려면 다음과 같이하십시오.

var focused = $('.focused');

참고 URL : https://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element