내용 편집 가능한 div의 새 줄에서 이벤트 트리거

내용 편집 가능한 div의 새 줄에서 이벤트 트리거

컨텐츠 편집 가능한 디브에 새 줄이 생성되었음을 나타내는 이벤트를 들으려고 합니다.이 목적은 새 빈 줄이 만들어지고 해당 줄에 캐럿이 있을 때 또는 사용자가 캐럿 위치를 현재 빈 줄로 클릭할 때마다 사용자에게 몇 가지 옵션을 표시하는 것입니다.

제 책에는 사용자가 경쟁이 가능한 디브 내에서 새로운 라인에 오르게 되는 네 가지 사건이 있는 것 같습니다.

• 입력 누르기
• 끝에 빈 새 줄이 있는 내용 붙여넣기
• 캐럿(blinking 줄)을 빈 줄로 위치 이동하게 하는 클릭
• 화살표 키를 사용하여 새 줄로 이동

물론 경쟁이 가능한 디바 라인에서 새로운 라인은 브라우저마다 다른 것을 의미하며, 크롬에서는 생성되는 것처럼 보입니다.<div><br/></div>태그, 하지만 너무 많이 검색한 나머지 다른 브라우저가 생성할 수도 있는 것 같습니다.<div><p></p></div>아니면 아마도<span>꼬리표를 붙이기

지금 몇 번이나 이 문제를 해결하려고 시도해봤는데, 그냥 끝내야만 해요.이 구분 아래에 추가되는 새 요소를 듣고 캐럿 위치가 현재 빈 '새 줄' 태그 내에 있는지 확인하는 것이 정말로 가장 좋은 방법일까요?캐럿이 이동할 때마다 확인하는 것이 매우 비효율적으로 보입니다. 이 작업을 수행하는 더 나은 방법이 있습니까?

tldr에 대해 요약하자면; people

• 컨텐츠 편집 가능한 디브에서 새 줄을 확인하는 더 나은 방법이 있습니까?
• 어떻게 하면 이를 바탕으로 이벤트를 효율적으로 시작할 수 있을까요?

이것은 각도 컨텍스트 내에 있으며 jQuery도 있습니다(이 라이브러리를 사용하거나 사용하지 않을 수 있습니다).

----- 편집 -----

지금까지 대답은 새 줄 '이벤트'를 생성하고 해당 이벤트를 모니터링하는 데 초점을 맞췄습니다. 아마도 캐럿 위치를 폴링하는 것이 캐럿이 빈 줄에 있는지 여부를 판단하는 데 더 신뢰할 수 있는 방법일 것입니다.

지금까지 다른 답변에서는 컨텐츠 편집 가능한 디브 내에 새 줄을 만드는 이벤트 모니터링에 대해 설명했습니다.그러나 지금까지의 노력으로 볼 때 이 방법은 사용자가 캐럿을 새 줄로 가져온 경우 모니터링할 수 있는 신뢰할 수 있는 방법이 아닌 것 같습니다.

인터벌 이벤트를 설정하는 것이 까다롭고 오버헤드가 증가한다는 우려에도 불구하고, 아마도 이것은 단지 제 인식일 것입니다.아래는 파이어폭스와 크롬을 OSX에서 테스트했습니다.

function getNewLines() {
  console.log(document.getSelection());
  if (document.getSelection().anchorNode) {
    var node = document.getSelection().anchorNode;
    var nodeContents = "";
    if (node.innerHTML) {
      nodeContents = node.innerHTML.toLowerCase();
    } else {
      nodeContents = node.innerHTML;
    }
    if (nodeContents !== undefined) {
      if (nodeContents === "" || nodeContents == "<br>" || nodeContents ==
        "<br/>" || nodeContents.substr(nodeContents.length - 5) == "<br/>" ||
        nodeContents.substr(nodeContents.length - 4) == "<br>") {
        console.log("you are on a new line :]");
      } else {
        console.log('nope not a new line');
      }
    } else {
      console.log('nice try, but no not a new line');
    }
  }
}
setInterval(getNewLines, 100);

<div contenteditable="true">
  <p>Lets get started!</p>
</div>

여기 Fiddle 참조

사이드 노트:편집 가능한 내용의 새 줄의 동작은 다양한 것처럼 보이지만, firefox에서 그것이 현장의 기존 요소를 모방할 것이라고 언급했습니다.즉 사용하는 경우<div></div>, 파이어폭스는 사용할 것입니다.<div></div>, 사용하시는 경우<p></p>파이어폭스도 똑같이 할 것입니다.

이게 제가 한 일입니다.

$("#main").keyup(function (e) {
    if (e.which == 13) {
        doSomething();
    }
});
$("#main").on("click", "div:has(br)", function () {
    doSomething();
});
$("#main").on("paste", function () {
    setTimeout(function () {
        debugger;
        if ($('#main').children().last().children().last().has('br').length >0) {
            doSomething();
        }
    }, 100);
});

function doSomething(){
   alert("new line...");
}

다음은 JSFiddle 데모입니다.

크롬과 엣지에서 이 코드를 테스트해 봤습니다.메모장에서 복사하여 붙여넣을 때 빈 줄이 지워졌습니다.

http://codepen.io/tzach/pen/XbGWjZ?editors=101

angular
    .module('app', [])
    .directive('contenteditable', function ($timeout) {
        return {
            link: function($scope, element, attrs) {

                element.css('white-space', 'pre');

                element.on('keypress', function (e) {
                    if (e.keyCode === 13) {
                        $timeout(function () {
                            onNewLine();
                        }, 100);
                    }
                });

                element.on('paste', function (e) {
                    $timeout(function () {
                        var text = element.text();
                        var textRows = text.split('\n');

                        var html = element.html();
                        var htmlRows = html.split('<br>');

                        if (textRows[textRows.length - 1].trim() == '' ||
                            htmlRows[htmlRows.length - 1].trim() == '') {
                                onNewLine();
                        }
                    },0);
                });

                element.on('click', function(e) {
                    var html = e.target.innerHTML;
                    var text = e.target.innerText;
                    if (text === '\n' || html.toLowerCase() === '<br>') {
                        onNewLine();
                    }
                });

                function onNewLine() {
                    alert('new empty line');
                }
            }
        }
    });

당신을 위한 시작이 있습니다.저는 다른 브라우저 구현을 추측하려고 애쓰지도 않을 것입니다.대신 숨겨진 텍스트 영역에 포커스를 밀어 넣은 다음 해당 영역의 새 줄을 기준으로 테스트합니다(예:textarea.value.match(/\n$/)).

이는 모든 사용 사례를 처리해야 하며, 나머지는 범위를 통해 캐럿과 선택을 위장하는 것입니다.이 목적으로만 존재하는 플러그인이 있습니다.

자바스크립트

var contentEditable = document.querySelector('.content pre'),
    textarea = document.querySelector('.content textarea');

contentEditable.addEventListener('click', function() {
    textarea.focus();
    contentEditable.classList.add('pseudo-focus');
});
textarea.addEventListener('keyup', function(e) {
    contentEditable.innerText = textarea.value;

    if (textarea.value.match(/\n$/)) {
        alert('newline');
    }
});

HTML

<div class="content">
    <pre id="editable" contenteditable></pre>
    <textarea></textarea>
</div>

JS Fiddle 예제

언급URL : https://stackoverflow.com/questions/31830615/trigger-event-on-new-line-in-content-editable-div