contenteditable 변경 이벤트

contenteditable 변경 이벤트

---

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

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

---

키 이벤트는 편집 가능한 요소에 의해 해고에 당신이 알고 있어야하지만 나는, 부착 청취자를 건의 할 것입니다 keydown및 keypress콘텐츠 자체가 변경되기 전에 이벤트가 발사된다. 여기에는 컨텐츠를 변경하는 가능한 모든 방법이 포함되지 않습니다. 사용자는 편집 또는 상황에 맞는 브라우저 메뉴에서 잘라 내기, 복사 및 붙여 넣기를 사용할 수도 있으므로 cut copy및 paste이벤트도 처리 할 수 있습니다. 또한 사용자는 텍스트 나 다른 컨텐츠를 삭제할 수 있으므로 더 많은 이벤트가 있습니다 ( 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 라이브러리를 살펴보십시오

---

비 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);
});

---

나는 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')});

---

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 />

---

두 가지 옵션 :

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 });

---

나를 위해 일한 것은 다음과 같습니다.

   var clicked = {} 
   $("[contenteditable='true']").each(function(){       
        var id = $(this).attr("id");
        $(this).bind('focus', function() {
            // store the original value of element first time it gets focus
            if(!(id in clicked)){
                clicked[id] = $(this).html()
            }
        });
   });

   // then once the user clicks on save
   $("#save").click(function(){
            for(var id in clicked){
                var original = clicked[id];
                var current = $("#"+id).html();
                // check if value changed
                if(original != current) save(id,current);
            }
   });

---

이 주제는 내가 주제를 조사하는 동안 매우 도움이되었습니다.

여기에서 사용할 수있는 일부 코드를 jQuery 플러그인으로 수정하여 재사용 할 수있는 형태로 주로 내 요구를 충족 시키지만 다른 사람들은 contenteditable 태그를 사용하여 점프 스타트하기위한 더 간단한 인터페이스에 감사 할 수 있습니다.

https://gist.github.com/3410122

최신 정보:

인기가 높아짐에 따라 플러그인은 Makesites.org에 의해 채택되었습니다 .

개발은 여기에서 계속됩니다 :

https://github.com/makesites/jquery-contenteditable

---

여기 내가 결국 사용하고 훌륭하게 작동하는 솔루션이 있습니다. 내용을 편집 할 수있는 한 줄 div를 사용하고 있기 때문에 $ (this) .text ()을 대신 사용합니다. 그러나 .html ()을 사용하면 전역 / 비전 역 변수의 범위에 대해 걱정할 필요가 없으며 이전은 실제로 편집기 div에 첨부됩니다.

$('body').delegate('#editor', 'focus', function(){
    $(this).data('before', $(this).html());
});
$('#client_tasks').delegate('.task_text', 'blur', function(){
    if($(this).data('before') != $(this).html()){
        /* do your stuff here - like ajax save */
        alert('I promise, I have changed!');
    }
});

---

비 JQuery 답변 ...

function makeEditable(elem){
    elem.setAttribute('contenteditable', 'true');
    elem.addEventListener('blur', function (evt) {
        elem.removeAttribute('contenteditable');
        elem.removeEventListener('blur', evt.target);
    });
    elem.focus();
}

그것을 사용하려면 id = "myHeader"로 헤더 요소를 호출하십시오 (예 :).

makeEditable(document.getElementById('myHeader'))

해당 요소는 이제 포커스를 잃을 때까지 사용자가 편집 할 수 있습니다.

---

contentEditable 속성을 가진 요소가 변경 될 때 onchange 이벤트가 발생하지 않습니다. 제안 된 접근 방식은 단추를 추가 하여 에디션 을 "저장" 하는 것입니다.

그런 식으로 문제를 처리하는이 플러그인을 확인하십시오.

• 빠르고 더러운 jQuery 컨텐츠 만들기

---

타이머와 "저장"버튼을 피하기 위해 요소에 포커스가 없으면 블러 이벤트가 발생할 수 있습니다. 그러나 요소가 실제로 초점을 맞추고 defocused 된 것이 아니라 변경되었는지 확인하려면 내용을 마지막 버전과 비교해야합니다. 또는 keydown 이벤트를 사용하여이 요소에 "dirty"플래그를 설정하십시오.

---

MutationEvents에서 DOMCharacterDataModified를 사용 하면 동일하게됩니다. 시간 초과는 잘못된 값을 보내지 않도록 설정되어 있습니다 (예 : Chrome에서 스페이스 키에 문제가 있음)

var timeoutID;
$('[contenteditable]').bind('DOMCharacterDataModified', function() {
    clearTimeout(timeoutID);
    $that = $(this);
    timeoutID = setTimeout(function() {
        $that.trigger('change')
    }, 50)
});
$('[contentEditable]').bind('change', function() {
    console.log($(this).text());
})

JSFIDDLE 예

---

이를 위해 jQuery 플러그인을 빌드했습니다.

(function ($) {
    $.fn.wysiwygEvt = function () {
        return this.each(function () {
            var $this = $(this);
            var htmlold = $this.html();
            $this.bind('blur keyup paste copy cut mouseup', function () {
                var htmlnew = $this.html();
                if (htmlold !== htmlnew) {
                    $this.trigger('change')
                }
            })
        })
    }
})(jQuery);

당신은 단순히 전화 할 수 있습니다 $('.wysiwyg').wysiwygEvt();

원하는 경우 이벤트를 제거 / 추가 할 수도 있습니다

---

JQuery의 간단한 답변, 나는이 코드를 만들었고 다른 사람들에게도 도움이 될 것이라고 생각했습니다.

    var cont;

    $("div [contenteditable=true]").focus(function() {
        cont=$(this).html();
    });

    $("div [contenteditable=true]").blur(function() {
        if ($(this).html()!=cont) {
           //Here you can write the code to run when the content change
        }           
    });

---

이 아이디어를 확인하십시오. http://pastie.org/1096892

나는 그것이 가깝다고 생각합니다. HTML 5는 실제로 변경 이벤트를 사양에 추가해야합니다. 유일한 문제는 콜백 함수가 내용이 실제로 $ (this) .html ()에서 업데이트되기 전에 (== $ (this) .html ()) 전에 평가한다는 것입니다. setTimeout이 작동하지 않아서 슬프다. 당신이 무슨 생각을하는지 제게 알려주세요.

---

@balupton의 답변을 바탕으로 :

$(document).on('focus', '[contenteditable]', e => {
	const self = $(e.target)
	self.data('before', self.html())
})
$(document).on('blur', '[contenteditable]', e => {
	const self = $(e.target)
	if (self.data('before') !== self.html()) {
	  self.trigger('change')
	}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

참고 URL : https://stackoverflow.com/questions/1391278/contenteditable-change-events