컨텐츠 편집 가능한 엔티티의 끝으로 커서를 이동하는 방법

캐럿을 contenteditableGmail 노트 위젯처럼 노드 끝으로 이동해야합니다 .

StackOverflow에서 스레드를 읽었지만 해당 솔루션은 입력 사용을 기반으로하며 contenteditable요소 와 함께 작동하지 않습니다 .

또 다른 문제가 있습니다.

니코 화상 경우의 솔루션은 작동 contenteditable사업부 다른 multilined 요소를 포함하지 않습니다.

예를 들어 div에 다른 div가 포함되어 있고 이러한 다른 div에 다른 내용이 포함되어 있으면 몇 가지 문제가 발생할 수 있습니다.

이를 해결하기 위해 다음과 같은 해결책을 마련했습니다. 이는 Nico 의 개선 사항입니다 .

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: /programming/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: /programming/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));

용법:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

이런 식으로 커서는 확실히 마지막 요소의 끝에 위치하며 결국 중첩됩니다.

편집 # 1 : 더 일반적으로 사용하려면 while 문은 텍스트를 포함 할 수없는 다른 모든 태그도 고려해야합니다. 이러한 요소는 명명 된 무효 요소를 , 그리고에서 이 문제 요소가 무효 인 경우 테스트하는 방법에 대한 몇 가지 방법이 있습니다. 따라서 인수가 void 요소가 아닌 경우 canContainText반환 하는 함수가 있다고 가정 true하면 다음 코드 줄이됩니다.

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

다음으로 교체해야합니다.

canContainText(getLastChildElement(contentEditableElement))

편집 # 2 : 위의 코드는 모든 변경 사항을 설명하고 논의하면서 완전히 업데이트되었습니다.

Geowa4의 솔루션은 텍스트 영역에서 작동하지만 콘텐츠 편집 가능 요소에는 작동하지 않습니다.

이 솔루션은 캐럿을 contenteditable 요소의 끝으로 이동하기위한 것입니다. contenteditable을 지원하는 모든 브라우저에서 작동합니다.

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

다음과 유사한 코드에서 사용할 수 있습니다.

elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);

이전 브라우저에 관심이 없다면이 브라우저가 나를 위해 트릭을 수행했습니다.

// [optional] make sure focus is on the element
yourContentEditableElement.focus();
// select all the content in the element
document.execCommand('selectAll', false, null);
// collapse selection to the end
document.getSelection().collapseToEnd();

범위를 통해 커서를 끝까지 설정할 수 있습니다.

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); // optimization

  // set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}

요소를 편집 가능하게 만들려고 비슷한 문제가 발생했습니다. Chrome과 FireFox에서 가능했지만 FireFox에서는 캐럿이 입력의 시작 부분으로 이동하거나 입력이 끝난 후 한 칸 이동했습니다. 내용을 편집하려는 최종 사용자에게 매우 혼란 스럽습니다.

몇 가지 시도하는 해결책을 찾지 못했습니다. 나를 위해 일한 유일한 것은 내 .NET 내부에 평범한 텍스트 입력을 넣어 "문제를 해결"하는 것입니다. 이제 작동합니다. "컨텐츠 편집 가능"은 여전히 ​​최첨단 기술이며 상황에 따라 원하는대로 작동 할 수도 있고 작동하지 않을 수도 있습니다.

포커스 이벤트에 대한 응답으로 커서를 편집 가능한 범위의 끝으로 이동 :

  moveCursorToEnd(el){
    if(el.innerText && document.createRange)
    {
      window.setTimeout(() =>
        {
          let selection = document.getSelection();
          let range = document.createRange();

          range.setStart(el.childNodes[0],el.innerText.length);
          range.collapse(true);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      ,1);
    }
  }

그리고 이벤트 핸들러에서 호출합니다 (React here) :

onFocus={(e) => this.moveCursorToEnd(e.target)}} 

contenteditable <div>및 의 문제 <span>는 처음에 입력을 시작하면 해결됩니다. 이에 대한 한 가지 해결 방법은 div 요소와 해당 함수에서 포커스 이벤트를 트리거하고 div 요소에 이미있는 항목을 지우고 다시 채우는 것입니다. 이렇게하면 문제가 해결되고 마지막으로 범위와 선택을 사용하여 끝에 커서를 놓을 수 있습니다. 나를 위해 일했습니다.

  moveCursorToEnd(e : any) {
    let placeholderText = e.target.innerText;
    e.target.innerText = '';
    e.target.innerText = placeholderText;

    if(e.target.innerText && document.createRange)
    {
      let range = document.createRange();
      let selection = window.getSelection();
      range.selectNodeContents(e.target);
      range.setStart(e.target.firstChild,e.target.innerText.length);
      range.setEnd(e.target.firstChild,e.target.innerText.length);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

HTML 코드에서 :

<div contentEditable="true" (focus)="moveCursorToEnd($event)"></div>