web-dev-qa-db-ja.com

contenteditableが変更されたときにイベントをトリガーします

Divs値が変更された場合、イベントをトリガーするにはどうすればよいですか？

<div class="changeable" contenteditable="true"> Click this div to edit it <div>

そのため、コンテンツが変更されたときにアラートを作成したり、他のことをしたりします。

$('.changeable').text().change(function() {
  alert('Handler for .change() called.');
});
jquerycontenteditable
42
johnmosly

内容を変数に保存し、blur()イベントの後で内容が異なるかどうかを確認するだけです。異なる場合は、新しいコンテンツを保存します。

var contents = $('.changeable').html();
$('.changeable').blur(function() {
    if (contents!=$(this).html()){
        alert('Handler for .change() called.');
        contents = $(this).html();
    }
});

例： http://jsfiddle.net/niklasvh/a4QNB/

45
Niklas

JQueryのdata（）関数でfocus/blurイベントを使用するだけです：

// Find all editable content.
$('[contenteditable=true]')
    // When you click on item, record into data("initialText") content of this item.
    .focus(function() {
        $(this).data("initialText", $(this).html());
    });
    // When you leave an item...
    .blur(function() {
        // ...if content is different...
        if ($(this).data("initialText") !== $(this).html()) {
            // ... do something.
            console.log('New data when content change.');
            console.log($(this).html());
        }
    });
});

更新：バニラJS

// Find all editable content.
var contents = document.querySelectorAll("[contenteditable=true]");
[].forEach.call(contents, function (content) {
    // When you click on item, record into `data-initial-text` content of this item.
    content.addEventListener("focus", function () {
        content.setAttribute("data-initial-text", content.innerHTML);
    });
    // When you leave an item...
    content.addEventListener("blur", function () {
        // ...if content is different...
        if (content.getAttribute("data-initial-text") !== content.innerHTML) {
            // ... do something.
            console.log("New data when content change.");
            console.log(content.innerHTML);
        }
    });
});
16
Bruno Lesieur

これを行うために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();を呼び出すことができます

必要に応じてイベントを削除/追加することもできます

12
Blowsie

現在、これに対する最善の解決策は HTML5入力イベント です

<div contenteditable="true" id="content"></div>

あなたのjqueryで。

$('#content').on('input', (e) => {
    // your code here
    alert('changed')
});
9
Canaan Etai

EventListener（jQueryメソッドではない）を使用して行う方が簡単です：

 document.getElementById（ "editor"）。addEventListener（ "input"、function（）{
 alert（ "input event fired"）; 
}、false）;
6
VasG

これが私のアプローチです...

$('.changeable').focusout(function() {
  alert('Handler for .change() called.');
});
5
Marcel Barraza

Jqueryのさらに別のバージョン。 jsFiddleで表示 こちら 。

var $editableContent = $("#mycontent");

//  Implement on text change
$editableContent.on("focus", function(event) {$(this).data("currentText", $(this).text());});

$editableContent.on("blur", function (event) {
        if ($(this).text() != $(this).data("currentText")) {
                $(this).trigger('change');}});


//  Wire onchange event
$editableContent.on("change", function(){alert("Text changed to: " + $(this).text())});
2
dcapelo

blur要素でDOMSubtreeModifiedイベントとcontenteditableイベントを結合する必要があります。

var contentEdited = false;

function fn($el) {
  if (contentEdited) {
    var text = $el[0].innerText.trim();
    console.log(text);
    contentEdited = false;
  }
}
$("div.editable").on("blur", function() {
  fn($(this));
}).on("DOMSubtreeModified", function() {
  contentEdited = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="editable" contenteditable="true">Click this div to edit it<div>
1
Dan Philip

Jquery-versionは次のとおりです。

function fix_contenteditableOnchange(obj)
{
     div=$(obj);
     var contents = div.html();
     var onchange = div.attr('onchange');
     div.blur(function() {
      if (contents!=$(this).html()){
        eval(onchange);
        fix_contenteditableOnchange(obj);
      }
     });
}

これを試してください。

1
Sven

chromeそしておそらく他のブラウザにはバグがあります。ユーザーがタブを押すと、スペースが作成され、Apple-be spanまたはそのようなものが追加されます。

var contents = $('.changeable').html();
$('.changeable').blur(function() {
   if (contents!=$(this).html()){
 alert('Handler for .change() called.');
      $(".Apple-tab-span").remove();
       contents = $(this).html();
       contentsTx = $(this).text();
       alert(contentsTx);

   }
});

これにより、スパンが削除されます。上記のコードと同じように少し変更するか、uを追加します。

.Apple-tab-span
{
  Display:None;
}

これにより問題も解決されます.. http://jsfiddle.net/a4QNB/312/

修正された@Nikalsの回答...

1
nikunjM

以前のバージョンをわずかに変更した別のソリューションですが、一部のユーザーにとっては使いやすいかもしれません。

アイデアは、Originの値を保存し、それを「ぼかし」イベントの現在の値と比較することです。 Origin値を編集可能なdivタグの属性として保存します（Origin値の変数を作成する代わりに）。 Originの値のコンテナとして属性を使用すると、テーブルに（セルとして）多数の編集可能なdivがある場合に便利です。したがって、多くの変数を作成する必要がないため、Originの値を取得するのは簡単です。

私の完全なコード例をご覧ください：

編集可能なdiv

<td><div contenteditable="true" class="cell" Origin="originValue">originValue</div></td>

ブラーの変化を検出する

var cells = $("#table").find('td>div[contenteditable=true]');

cells.each(function () {    

        $(this).blur(function() {

                    if ($(this).text() != $(this).attr("Origin")) {
                        console.log('changed');
                    }
        });    
});
0
Bronek
_function myFunction(){
  alert('Handler for .change() called.');
}_
<div class="changeable" contenteditable="true" onfocusout="myFunction()" > Click this div to edit it <div>
0
πter