div contentedable 요소에 포커스 설정

div contentedable 요소에 포커스 설정

나는 있습니다<div contenteditable=true>여기서 위지위그로 몇 가지 요소를 정의합니다.예를들면<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 요소 내부에 남습니다.

추신: 그냥 평범한 공간은 저에게 적합하지 않습니다.

너비와 높이가 0인 만족스러운 DIV에 대해 jQuery focus()가 작동하지 않는다는 것을 알게 되었습니다..get(0)으로 대체했습니다.focus () - 네이티브 자바스크립트 포커스 방법 - 그리고 그것은 작동합니다.

전화를 할 수 없는 경우가 많습니다..focus()요소에서 tabIndex가 -1이기 때문입니다. 즉, 탭을 눌러 탐색할 때 탭 키가 해당 항목에 초점을 맞출 수 없습니다.

tabIndex를 >= 0으로 변경하면 요소에 초점을 맞출 수 있습니다.동적으로 수행해야 하는 경우 이벤트 수신기의 요소에 탭 인덱스 >= 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)

@Surmon 답변을 기반으로 합니다.텍스트에서 마지막 삽입 위치 대신 마지막 문자/숫자 바로 뒤에 자동 포커스를 설정하려는 경우(하위 노드가 일반 텍스트가 아닌 블록 유형 태그로 둘러싸인 경우 마지막 삽입 위치에서 커서가 새 줄로 이동됨) 다음과 같은 작은 수정 사항을 적용합니다.

r.setStart(p.lastChild, 1);
r.setEnd(p.lastChild, 1);

편집기/요소에 하위 노드가 있는지 확인하고 상황에 따라 끝에 커서를 설정하는 확장 기능입니다.

let p = document.getElementById('contenteditablediv');
p.focus();  // alternatively use setTimeout(() => { p.focus(); }, 0);
// this is enough to focus an empty element (at least in Chrome)

if (p.hasChildNodes()) {  // if the element is not empty
  let s = window.getSelection();
  let r = document.createRange();
  let e = p.childElementCount > 0 ? p.lastChild : p;  
  r.setStart(e, 1); 
  r.setEnd(e, 1);    
  s.removeAllRanges();
  s.addRange(r);
} 

를 관리하는 MediumEditor를 사용하는 사람이 있습니다.contenteditable요소, 이 문제에 대한 장애물, 다음은 저에게 효과가 있었습니다.

editor.selectElement(editorDOMNode);

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

3. 다음과 같이 편집기 내의 특정 하위 노드에 초점을 맞출 수도 있습니다.

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

한 가지 더 확인해야 할 사항:브라우저의 콘솔 창이 열려 있는 경우 페이지를 로드할 때 콘솔에 포커스가 없는지 확인합니다. 그렇지 않으면 페이지의 요소가 예상대로 포커스를 받지 않습니다.

이것은 또한 당신이 도망갈 수 없다는 것을 의미하는 것처럼 보입니다.document.querySelector('#your-elem').focus()(Mac서 Chrome, Safari 및 Firefox 와 함년봄용월께해사콘에, 2020솔8년)

contentededdiv 내의 모든 요소에 "클릭" 이벤트 핸들러를 바인딩하고 클릭 시 클래스/스타일을 변경합니다(즉, 요소에 "포커스된" 클래스 추가).

색상 테두리 또는 내부 상자 그림자와 같은 스타일을 추가하여 사용자에게 포커스가 있는 요소를 식별할 수 있습니다.그런 다음 jQuery 스크립트의 포커스된 요소에 액세스하려면 다음과 같은 작업을 수행합니다.

var focused = $('.focused');

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