[javascript] contenteditable 변경 이벤트

사용자가 divwith contenteditable속성 의 내용을 편집 할 때 함수를 실행하고 싶습니다 . onchange이벤트 와 동등한 것은 무엇입니까 ?

jQuery를 사용하고 있으므로 jQuery를 사용하는 솔루션이 선호됩니다. 감사!



답변

키 이벤트는 편집 가능한 요소에 의해 해고에 당신이 알고 있어야하지만 나는, 부착 청취자를 건의 할 것입니다 keydownkeypress콘텐츠 자체가 변경되기 전에 이벤트가 발사된다. 여기에는 컨텐츠를 변경하는 가능한 모든 방법이 포함되지 않습니다. 사용자는 편집 또는 상황에 맞는 브라우저 메뉴에서 잘라 내기, 복사 및 붙여 넣기를 사용할 수도 있으므로 cut copypaste이벤트도 처리 할 수 있습니다. 또한 사용자는 텍스트 나 다른 컨텐츠를 삭제할 수 있으므로 더 많은 이벤트가 있습니다 ( mouseup예 :). 요소의 내용을 폴백으로 폴링 할 수 있습니다.

업데이트 2014 년 10 월 29 일

HTML5의 input이벤트가 장기적으로 답변입니다. 글을 쓰는 시점 contenteditable에서 현재 Mozilla (Firefox 14의) 및 WebKit / Blink 브라우저의 요소 는 지원 되지만 IE는 지원하지 않습니다.

데모:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);
<div contenteditable="true" id="editor">Please type something in here</div>

데모 : http://jsfiddle.net/ch6yn/2691/


답변

다음은 on모든 컨텐트 편집 가능 파일에 사용하는보다 효율적인 버전입니다 . 여기에 최고의 답변을 기반으로합니다.

$('body').on('focus', '[contenteditable]', function() {
    const $this = $(this);
    $this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
    const $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
});

프로젝트는 다음과 같습니다 : https://github.com/balupton/html5edit


답변

MutationObserver 사용을 고려하십시오 . 이 옵저버는 DOM의 변화에 ​​반응하고 Mutation Events 의 성능을 대체하기 위해 설계되었습니다 .

장점 :

  • 화재 어떤 어려운 변화가 발생는 다른 답변에 의해 제안 키 이벤트를 듣고에 의해 달성했다. 예를 들어, 상황에 맞는 메뉴를 통해 끌어서 놓기, 기울임 꼴, 복사 / 잘라 내기 / 붙여 넣기 등이 모두 잘 작동합니다.
  • 성능을 염두에두고 설계되었습니다.
  • 간단하고 간단한 코드. 10 개의 이벤트를 수신하는 코드가 아닌 하나의 이벤트를 수신하는 코드를 이해하고 디버그하는 것이 훨씬 쉽습니다.
  • Google에는 MutationObservers를 매우 쉽게 사용할 수 있는 뛰어난 돌연변이 요약 라이브러리 가 있습니다.

단점 :

  • 최신 버전의 Firefox (14.0+), Chrome (18+) 또는 IE (11+)가 필요합니다.
  • 이해할 새로운 API
  • 모범 사례 또는 사례 연구에 대한 정보는 많지 않습니다.

더 알아보기:

  • MutationObserers를 사용하여 다양한 이벤트를 처리하는 것과 비교할 약간의 스 니펫 을 작성했습니다 . 그의 대답 에 가장 찬란한 의견이 있으므로 balupton의 코드를 사용했습니다 .
  • Mozilla 는 API에 대한 훌륭한 페이지를 가지고 있습니다
  • MutationSummary 라이브러리를 살펴보십시오

답변

나는 lawwantsin의 대답을 이렇게 수정했으며 이것은 나를 위해 작동합니다. 키 누르기 대신 키 업 이벤트를 사용하면 효과적입니다.

$('#editor').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() {
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#editor').on('change', function() {alert('changed')});


답변

비 jQuery의 빠르고 더러운 답변 :

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("someDiv");

setChangeListener(div, function(event){
    console.log(event);
});


답변

두 가지 옵션 :

1) 최신 (에버그린) 브라우저의 경우 :
“입력”이벤트는 대체 “변경”이벤트로 작동합니다.

https://developer.mozilla.org/en-US/docs/Web/Events/input

document.querySelector('div').addEventListener('input', (e) => {
    // Do something with the "change"-like event
});

또는

<div oninput="someFunc(event)"></div>

또는 (jQuery 사용)

$('div').on('click', function(e) {
    // Do something with the "change"-like event
});

2) IE11 및 최신 (상록) 브라우저를 설명하려면 :
div 내부의 요소 변경 및 내용을 감시합니다.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var div = document.querySelector('div');
var divMO = new window.MutationObserver(function(e) {
    // Do something on change
});
divMO.observe(div, { childList: true, subtree: true, characterData: true });


답변

const p = document.querySelector('p')
const result = document.querySelector('div')
const observer = new MutationObserver((mutationRecords) => {
  result.textContent = mutationRecords[0].target.data
  // result.textContent = p.textContent
})
observer.observe(p, {
  characterData: true,
  subtree: true,
})
<p contenteditable>abc</p>
<div />