[javascript] 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>답변
다음은 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 />