Событие jQuery для изменения html в элементе div?

Question

Короче говоря - у меня есть редактируемое <div>, и я хочу очистить форматирование, когда кто-то вставляет что-то. Поскольку jQuery не контролирует буфер обмена и я не хочу переходить в кросс-браузерную совместимость, я решилЯ бы прослушал событие, которое запускается при изменении содержимого.

Я пробовал $("#mydiv").change(), но очевидно, что это работает только для текстовых полей и текстовых областей (?), Так есть ли способ сделать это?

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

Спасибо!

Answer 1

Вы можете использовать .keyup() для копирования и вставки.Щелчок правой кнопкой мыши с последующим выбором вставки в контекстном меню, похоже, не записывает щелчок, поэтому .click() не работает .... вместо этого используйте setInterval() для проверки каждые X секунд для захвата вставок правой кнопкой мыши.

Не уверен, что вы можете связать .keyup() с div (может ли div фокусироваться во всех браузерах), но все всплывающие подсказки всплывают в документе, поэтому $(document) всегда будет работать.

$(function() {

      // Get initial text:
    var previous = $("#mydiv").text();

      // Make DIV editable if clicked
    $("#mydiv").click(function() { this.contentEditable = 'true'; });

      // Create a function for what to do if there is a change:
    $check = function() {

          // Check for a change
        if ($("#mydiv").text() != previous) {
            // What to do if there's been a change
            // ...
        }

          // Store what contents are for later comparison
        previous = $("#mydiv").text();        
    }

      // Add the div changed handler to both keyup (ctr + v)
      //   and mouseclick (right click paste)
    $(document).keyup($check);
      // Right click work around is to check every Xs
    setInterval(function() { $check(); }, 1000);
});​

jsFiddle Пример

Это работает с вставкой .... он захватывает клавиши ctr, shift и т.д.(если вы попробуете это с помощью ctr-v и отпустите одну клавишу за другой, следите за состоянием, так как статус будет отображаться только changed после выпуска первой клавиши и same после выпускавторой .... как и должно быть).

---

Примечание: мне нравится иметь как обработчик .keyup(), так и setInterval, поскольку это гарантирует, что обратная связь будет мгновенной для нажатия клавиш.... даже если после вставки правой кнопкой мыши может возникнуть задержка.

Answer 2

Я думаю, TinyMCE для JQuery может сделать всю работу за вас.

Answer 3

Вы можете использовать событие 'keydown' - оно будет фиксировать нажатие клавиши Shift, так что работает для вставки, а также клавишу удаления.

Если вам необходимо определить, изменился ли контент, сохраните старый контент и сравните его при возникновении события.

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

Answer 4

Возможно, это решение для вас: http://garage.pimentech.net/scripts_doc_jquery_jframe/

Answer 5

Используйте <textarea> вместо