의 contentEditable 변경 이벤트

해결법

1.키 이벤트는 편집 가능한 요소에 의해 해고에 당신은 콘텐츠 자체가 변경되기 전에를 keyDown 키 누르기 이벤트가 해고되는 것을 인식 할 필요가 있지만 나는, 부착 청취자를 건의 할 것입니다. 이 내용을 변경하는 모든 가능한 수단을 포함하지 않습니다 당신이 절단 된 사본을 처리하고 너무 이벤트를 붙여 넣을 수 있도록 사용자는 편집 또는 상황에 맞는 브라우저 메뉴에서 컷을 사용하여 복사 및 붙여 넣기 할 수 있습니다. 또한, 사용자는 텍스트 또는 기타 콘텐츠를 삭제할 수 있습니다, 그래서 더 많은 이벤트가을 (mouseup에, 예를 들면)가 있습니다. 당신은 대체로 요소의 내용을 폴링 할 수 있습니다.

키 이벤트는 편집 가능한 요소에 의해 해고에 당신은 콘텐츠 자체가 변경되기 전에를 keyDown 키 누르기 이벤트가 해고되는 것을 인식 할 필요가 있지만 나는, 부착 청취자를 건의 할 것입니다. 이 내용을 변경하는 모든 가능한 수단을 포함하지 않습니다 당신이 절단 된 사본을 처리하고 너무 이벤트를 붙여 넣을 수 있도록 사용자는 편집 또는 상황에 맞는 브라우저 메뉴에서 컷을 사용하여 복사 및 붙여 넣기 할 수 있습니다. 또한, 사용자는 텍스트 또는 기타 콘텐츠를 삭제할 수 있습니다, 그래서 더 많은 이벤트가을 (mouseup에, 예를 들면)가 있습니다. 당신은 대체로 요소의 내용을 폴링 할 수 있습니다.

UPDATE (29) 2014 10월

HTML5의 입력 이벤트는 장기적으로 답변입니다. 글을 쓰는 시점에서, 그것은 및 웹킷 / 깜박임 브라우저,하지만 IE (파이어 폭스 14) 현재 모질라에서의 contentEditable 요소에 대해 지원됩니다.

데모:

document.getElementById를 ( "편집").하여 addEventListener ( "입력"기능 () { CONSOLE.LOG (이하 "입력 이벤트는 트리거"); } 거짓); 에서 뭔가를 입력하세요 여기에

데모 : http://jsfiddle.net/ch6yn/2691/
2.여기에 모든 contenteditables에 대해 사용하는보다 효율적인 버전입니다. 그것은 여기에 상단 답변 기반으로합니다.

여기에 모든 contenteditables에 대해 사용하는보다 효율적인 버전입니다. 그것은 여기에 상단 답변 기반으로합니다.
```
$('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
3.MutationObserver를 사용하는 것이 좋습니다. 이 관계자는 DOM의 변화에 반응하도록 설계 돌연변이 이벤트에 성능이 좋은 대체된다.

MutationObserver를 사용하는 것이 좋습니다. 이 관계자는 DOM의 변화에 반응하도록 설계 돌연변이 이벤트에 성능이 좋은 대체된다.

장점 :

단점 :

더 알아보기:
4.나는 lawwantsin의과 같이 대답과 나를 위해이 작품을 수정했습니다. 나는 위대한 작품을 KeyUp 이벤트 대신 키 입력을 사용합니다.

나는 lawwantsin의과 같이 대답과 나를 위해이 작품을 수정했습니다. 나는 위대한 작품을 KeyUp 이벤트 대신 키 입력을 사용합니다.
```
$('#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')});
```

5.비 jQuery를 신속하고 더러운 답 :

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

6.두 가지 옵션 :

두 가지 옵션 :

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과 현대 (상록) 브라우저에 대한 계정 : 이 요소가 변경 및 사업부 내부에 그 내용을 감시합니다.

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

7.CONST document.querySelector p = ( 'P') CONST document.querySelector 결과 = ( 'DIV') CONST 관찰자 새로운 MutationObserver = ((mutationRecords) => { result.textContent mutationRecords = [0] .target.data // result.textContent = p.textContent }) observer.observe (p { CharacterData를 : 사실, 하위 트리 : 사실, }) ABC

CONST document.querySelector p = ( 'P') CONST document.querySelector 결과 = ( 'DIV') CONST 관찰자 새로운 MutationObserver = ((mutationRecords) => { result.textContent mutationRecords = [0] .target.data // result.textContent = p.textContent }) observer.observe (p { CharacterData를 : 사실, 하위 트리 : 사실, }) ABC

8.여기에 나를 위해 일한 내용은 다음과 같습니다

여기에 나를 위해 일한 내용은 다음과 같습니다

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

9.내가 주제를 조사하는 동안이 스레드는 매우 도움이되었다.

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

그것은 주로 내 요구를 충족 할 수 있지만 다른 사람의 contentEditable 태그를 사용 밀어서 시동 간단한 인터페이스를 감사 할 수있다, 재사용 가능한 형태 그래서 나는 jQuery 플러그인으로 여기에 해당 코드의 일부를 수정했습니다.

https://gist.github.com/3410122

의 증가 인기로 인해 플러그인은 Makesites.org에 의해 채택되었다

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

https://github.com/makesites/jquery-contenteditable
10.타이머와 "저장"버튼을 피하기 위해 요소가 포커스를 잃을 느릅 나무 화재 흐림 이벤트를 사용할 수 있습니다. 하지만 요소가 실제로 (단지 초점을 맞추고 디 포커스되지 않음) 변경된 것을 확인하기 위해, 자사의 콘텐츠는 마지막 버전과 비교해야한다. 이 요소에 대한 몇 가지 "더러운"플래그를 설정하기를 keyDown 이벤트를 사용합니다.

타이머와 "저장"버튼을 피하기 위해 요소가 포커스를 잃을 느릅 나무 화재 흐림 이벤트를 사용할 수 있습니다. 하지만 요소가 실제로 (단지 초점을 맞추고 디 포커스되지 않음) 변경된 것을 확인하기 위해, 자사의 콘텐츠는 마지막 버전과 비교해야한다. 이 요소에 대한 몇 가지 "더러운"플래그를 설정하기를 keyDown 이벤트를 사용합니다.
11.여기에 내가 사용하여 종료 및 부리 작동하는 솔루션입니다. 난 그냥 콘텐츠를 편집 할 수있는 한 줄의 DIV를 사용하고 대신 때문에 $ (이)는 .text ()를 사용합니다. 그러나 당신은 또한 글로벌 / 비 전역 변수의 범위에 대해 걱정할 필요가 해달라고하고, 전에 실제로 편집기 DIV에 부착) (이 방법을가 .html 수 있습니다.

여기에 내가 사용하여 종료 및 부리 작동하는 솔루션입니다. 난 그냥 콘텐츠를 편집 할 수있는 한 줄의 DIV를 사용하고 대신 때문에 $ (이)는 .text ()를 사용합니다. 그러나 당신은 또한 글로벌 / 비 전역 변수의 범위에 대해 걱정할 필요가 해달라고하고, 전에 실제로 편집기 DIV에 부착) (이 방법을가 .html 수 있습니다.
```
$('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!');
    }
});
```

12.JQuery와의 간단한 대답은, 난 그냥이 코드를 생성하고 너무 다른 사람을 위해 도움이 될 것입니다 생각

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

13.비 JQuery와 답 ...

비 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'))

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

14.onchange를 이벤트의 contentEditable 속성을 가진 요소가 변경 될 때, 제안 된 접근 방식은 "저장"에디션에 버튼을 추가 할 수 발사하지 않습니다.

onchange를 이벤트의 contentEditable 속성을 가진 요소가 변경 될 때, 제안 된 접근 방식은 "저장"에디션에 버튼을 추가 할 수 발사하지 않습니다.

그 방법으로 문제를 처리하는이 플러그인을 확인 :
15.MutationEvents에서 DOMCharacterDataModified을 사용하면 같은 이어질 것입니다. 타임 아웃 (크롬 I에서, 예를 들어 스페이스 키 몇 가지 문제를했다) 잘못된 값을 전송 방지하기 위해 설정입니다

MutationEvents에서 DOMCharacterDataModified을 사용하면 같은 이어질 것입니다. 타임 아웃 (크롬 I에서, 예를 들어 스페이스 키 몇 가지 문제를했다) 잘못된 값을 전송 방지하기 위해 설정입니다
```
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 예

16.나는이 작업을 수행의 플러그인 jQuery를 만들었습니다.

나는이 작업을 수행의 플러그인 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 VT를 () ( 'WYSIWYG..');

당신은 또한 당신이 바라는 경우에 이벤트를 추가 / 제거 할 수 있습니다

17.각도에서 2+

각도에서 2+

<div contentEditable (input)="type($event)">
   Value
</div>


@Component({
  ...
})
export class ContentEditableComponent {

 ...

 type(event) {
   console.log(event.data) // <-- The pressed key
   console.log(event.path[0].innerHTML) // <-- The content of the div 
 }
}

18.이 아이디어를 확인하세요. http://pastie.org/1096892

이 아이디어를 확인하세요. http://pastie.org/1096892

나는 그것이 가까운 것 같아요. HTML 5는 정말 사양으로 변경 이벤트를 추가 할 필요가있다. 유일한 문제는 그 콜백 함수 평가되면 (전 == $ (이) .html 중에서 ()) 내용이 실제로 $에 업데이트되기 전에 (이) .html 중에서 ()입니다. 없는 일을, 그리고 슬픈에서는 setTimeout. 당신이 무슨 생각을하는지 제게 알려주세요.
19.@의 balupton의 답변에 따라 :

@의 balupton의 답변에 따라 :

$ (문서) CSTE 연구진 ( '초점', '[도 contentEditable], E => { const를 자기 = $ (e.target) self.data ( '이전', self.html ()) }) $ (문서) CSTE 연구진 ( "흐림", "[도 contentEditable], E => { const를 자기 = $ (e.target) 경우 (self.data ( '전')! == self.html ()) { self.trigger ( '변화') } }) <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

from https://stackoverflow.com/questions/1391278/contenteditable-change-events by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 사용하여 이미지 소스 변경 (0)	2020.09.26
[JQUERY] 동적 높이 폭 (CSS 레이아웃 유체) 중복]이면 (0)	2020.09.26
[JQUERY] jQuery를 $ .ready와 UpdatePanels (문서)? (0)	2020.09.26
[JQUERY] jQuery로 단어를 강조 (0)	2020.09.25
[JQUERY] 텍스트 입력 필드 내에서 (문자) 커서의 위치를 가져옵니다 (0)	2020.09.25

복붙노트

[JQUERY] 의 contentEditable 변경 이벤트

의 contentEditable 변경 이벤트

해결법

2.여기에 모든 contenteditables에 대해 사용하는보다 효율적인 버전입니다. 그것은 여기에 상단 답변 기반으로합니다.

3.MutationObserver를 사용하는 것이 좋습니다. 이 관계자는 DOM의 변화에 반응하도록 설계 돌연변이 이벤트에 성능이 좋은 대체된다.

4.나는 lawwantsin의과 같이 대답과 나를 위해이 작품을 수정했습니다. 나는 위대한 작품을 KeyUp 이벤트 대신 키 입력을 사용합니다.

5.비 jQuery를 신속하고 더러운 답 :

6.두 가지 옵션 :

8.여기에 나를 위해 일한 내용은 다음과 같습니다

9.내가 주제를 조사하는 동안이 스레드는 매우 도움이되었다.

12.JQuery와의 간단한 대답은, 난 그냥이 코드를 생성하고 너무 다른 사람을 위해 도움이 될 것입니다 생각

13.비 JQuery와 답 ...

14.onchange를 이벤트의 contentEditable 속성을 가진 요소가 변경 될 때, 제안 된 접근 방식은 "저장"에디션에 버튼을 추가 할 수 발사하지 않습니다.

15.MutationEvents에서 DOMCharacterDataModified을 사용하면 같은 이어질 것입니다. 타임 아웃 (크롬 I에서, 예를 들어 스페이스 키 몇 가지 문제를했다) 잘못된 값을 전송 방지하기 위해 설정입니다

16.나는이 작업을 수행의 플러그인 jQuery를 만들었습니다.

17.각도에서 2+

18.이 아이디어를 확인하세요. http://pastie.org/1096892

19.@의 balupton의 답변에 따라 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

의 contentEditable 변경 이벤트

해결법

2.여기에 모든 contenteditables에 대해 사용하는보다 효율적인 버전입니다. 그것은 여기에 상단 답변 기반으로합니다.

3.MutationObserver를 사용하는 것이 좋습니다. 이 관계자는 DOM의 변화에 ​​반응하도록 설계 돌연변이 이벤트에 성능이 좋은 대체된다.

4.나는 lawwantsin의과 같이 대답과 나를 위해이 작품을 수정했습니다. 나는 위대한 작품을 KeyUp 이벤트 대신 키 입력을 사용합니다.

5.비 jQuery를 신속하고 더러운 답 :

6.두 가지 옵션 :

8.여기에 나를 위해 일한 내용은 다음과 같습니다

9.내가 주제를 조사하는 동안이 스레드는 매우 도움이되었다.

12.JQuery와의 간단한 대답은, 난 그냥이 코드를 생성하고 너무 다른 사람을 위해 도움이 될 것입니다 생각

13.비 JQuery와 답 ...

14.onchange를 이벤트의 contentEditable 속성을 가진 요소가 변경 될 때, 제안 된 접근 방식은 "저장"에디션에 버튼을 추가 할 수 발사하지 않습니다.

15.MutationEvents에서 DOMCharacterDataModified을 사용하면 같은 이어질 것입니다. 타임 아웃 (크롬 I에서, 예를 들어 스페이스 키 몇 가지 문제를했다) 잘못된 값을 전송 방지하기 위해 설정입니다

16.나는이 작업을 수행의 플러그인 jQuery를 만들었습니다.

17.각도에서 2+

18.이 아이디어를 확인하세요. http://pastie.org/1096892

19.@의 balupton의 답변에 따라 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

3.MutationObserver를 사용하는 것이 좋습니다. 이 관계자는 DOM의 변화에 반응하도록 설계 돌연변이 이벤트에 성능이 좋은 대체된다.