Когда значение divs изменяется, как я могу вызвать событие?
<div class="changeable" contenteditable="true"> Click this div to edit it <div>
Поэтому, когда изменяется его содержимое, я хочу создать предупреждение и/или сделать другие вещи:
$('.changeable').text().change(function() {
alert('Handler for .change() called.');
});
Просто сохраните содержимое переменной и проверьте, не отличается ли оно от события blur(). Если это другое, сохраните новое содержимое.
var contents = $('.changeable').html();
$('.changeable').blur(function() {
if (contents!=$(this).html()){
alert('Handler for .change() called.');
contents = $(this).html();
}
});
example: http://jsfiddle.net/niklasvh/a4QNB/
Я построил плагин 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();
Вы также можете удалить/добавить события, если хотите
Вы можете просто использовать событие focus/blur с функцией data() jQuery:
// 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());
}
});
});
ОБНОВЛЕНИЕ: С Vanilla 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);
}
});
});
Проще сделать это, используя EventListener (не метод jQuery):
document.getElementById("editor").addEventListener("input", function() {
alert("input event fired");
}, false);
Это мой подход...
$('.changeable').focusout(function() {
alert('Handler for .change() called.');
});
лучшим решением для этого является событие ввода HTML5
<div contenteditable="true" id="content"></div>
в вашем jquery.
$('#content').on('input', (e) => {
// your code here
alert('changed')
});
Вот jquery-версия:
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);
}
});
}
Попробуйте это.
В хром и, возможно, в других браузерах есть ошибка, когда пользователь нажимает вкладку, она создаст пространство и добавит пробел apple-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);
}
});
Это приведет к удалению диапазона. он же, как и выше, просто немного изменил его, или вы можете добавить
.Apple-tab-span
{
Display:None;
}
и это также решит проблему. http://jsfiddle.net/a4QNB/312/
Только что измененный ответ @Nikals...
Другое решение, которое немного изменено в версии предыдущих, но может быть более удобным для некоторых из вас.
Идея состоит в том, чтобы сохранить исходное значение и сравнить его с текущим значением в событии "размытие". Я сохраняю исходное значение как атрибут редактируемого тега 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');
}
});
});
Еще одна версия в 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())});
Что вам нужно сделать, это создать соединение 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>
function myFunction(){
alert('Handler for .change() called.');
}<div class="changeable" contenteditable="true" onfocusout="myFunction()" > Click this div to edit it <div>