편집 된 요소의 삭제 이벤트 가져 오기

Question

contentEditable 요소에 대한 (기존의) 변경 이벤트를 시뮬레이트하려고합니다.하지만 입력 요소에 대해 동일한 문제가있는 것 같습니다. 불행히도 사용자가 텍스트를 선택하고 브라우저의 상황에 맞는 메뉴에서 "삭제"를 선택한 경우 이벤트를 가져 오는 방법을 모르겠습니다.

내가 어떻게 얻을 수 있겠습니까?

Answer 1

개정 대답 6 월 8 일 2012 년

은 당신이 원하는 것은 HTML5 input event입니다. 그러나 이것은 현재 WebKit에서 contenteditable 요소에 대해서만 작동하지만 잘하면 다른 브라우저에서도 구현됩니다 : Firefox 14 will apparently have it. already implemented in all major browsers for text inputs and textareas입니다.

데모 : http://jsfiddle.net/timdown/5e5E5/1/

HTML :

<div id="test" contenteditable="true">...</div> 

JS : 크로스 브라우저 솔루션을

var editableDiv = document.getElementById("test"); 

editableDiv.addEventListener("input", function(evt) { 
    alert("Editable content changed"); 
}, false); 

, 당신은 다양한 DOM mutation events (또한 MDN 참조) 그 중 일부를 사용할 수 있습니다 해고 될 것입니다. 나는 DOMCharacterDataModified과 아마도 DOMNodeRemoved이이 목적을 위해 유용한 것들이 될 것을 제안 할 것이다. 이러한 이벤트는 IE < = 8에 존재하지 않는 것을

참고 또한, 이러한 이벤트는 DOM4 Mutation Observers 찬성되지 않습니다. 그러나 글을 쓰는 시점 (2012 년 6 월)에는 매우 최근의 WebKit 브라우저에서만 지원됩니다. 따라서 단기간에서 중기 적으로 우리는 최소한 돌연변이 이벤트에 집착합니다.

editableDiv.addEventListener("DOMCharacterDataModified", function(evt) { 
    if (evt.newValue.length < evt.prevValue.length) { 
     alert("Characters deleted"); 
    } 
}, false);