contenteditable span의 변경을 모니터링 하시겠습니까?

Question

나는 span이고 contenteditable="true"입니다. 나는 change 이벤트를 첨부하려고합니다. 그러나 jQuery 문서에 따르면 변경은 양식 입력에 대해서만 작동합니다. 다른 방법이라도?

을 heres jsfiddle :

Answer 1

http://jsfiddle.net/vQuEA/이 페이지에이 블록을 추가 :

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

이 contenteditable와 태그가 변경 될 때마다 change 이벤트가 발생하게됩니다.

설명

focus, blur, keyup 및 paste에 대한 이벤트 리스너를받을 것 contenteditable 특성이 모든 요소.

focus 동안 현재 내부 HTML은 요소의 '이전'데이터로 저장됩니다.

blur/keyup/paste 동안 현재 내부 html은 'before'데이터와 비교되고 다른 경우 change 이벤트가 트리거됩니다.

Answer 2

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

jQuery를의 contentEditable 는 자동으로 '의 contentEditable'필드에 이벤트를 추가하고 이 기본 구현에서 추가 처리 (및 저장)

사용

에 대한 데이터를 변경 반환 플러그인 메소드 contentEditable()은 모든 'contenteditable' 필드가있는 부모 컨테이너에 연결된 입니다.

$("#...").contentEditable().change(myFunction); 

Answer 3

이것은 실제로 작동하는 것처럼 보입니다. 페이스트를 포함하여 모든 키 입력에

contentEditableTag.on('input', function(){ 
    console.log("input event"); 
}); 

화재, : 그것은이 다른 답변 이후 새로운 일이 있지만, 많이 청소기인지 확실하지.