Как я могу обнаружить изменение HTML внутри contenteditable div?

Question

У меня проблема с моим довольным делом. В настоящее время я пытаюсь обнаружить любое изменение в моем элементе div. Это работает довольно хорошо до сих пор. Но происходит сбой, когда я изменяю содержимое с помощью jQuery:

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">?</span>`);
  });
});

div {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

Как мне решить эту проблему? Я мог бы сделать эту проверку внутри своего события клика, но мне нужно добавить их много, поэтому я не хочу делать это каждый раз. В этом случае я думаю, что лучше сделать это в одной функции проверки ввода.

Answer 1

В этом случае вам нужно будет запустить событие, которое вы слушаете сами:

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      console.log('cleared editable');
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">?</span>`);
    input.trigger('input');
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

Answer 2

Если вы не хотите добавлять функцию в ваш .click() слушатель, вы можете добиться своего эффекта, используя MutationObserver API :

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">?</span>`);
  });
  
  
  const targetNode = document.getElementById('input');
  const config = { attributes: true, childList: true, subtree: true };
  const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);
  
});

div {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

Я не думаю, что это самый оптимальный способ, возможно, вам следует переосмыслить свою архитектуру. Но я уверен, что этот будет соответствовать вашим требованиям.