Question

我有span contenteditable="true"。我试图将change事件附加到它。但根据jQuery文档，更改仅适用于表单输入。还有别的吗？

Answer 1

将此块添加到您的页面：

$('[contenteditable]').on('focus', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

每当更改change的代码时，都会触发contenteditable个事件。

<强>解释

所有具有contenteditable属性的元素都会收到focus，blur，keyup和paste的事件监听器。

在focus期间，当前内部html被存储为元素的“之前”数据。

在blur / keyup / paste期间，将当前内部html与“之前”数据进行比较，如果不同，则会触发change事件。

Answer 2

https://github.com/makesites/jquery-contenteditable

jQuery contentEditable   自动添加＆＃39; contenteditable＆＃39;字段并返回   更改了数据以便进一步处理（并保存）

用法

在其基本实现中，插件方法contentEditable（）是   附加到具有所有＆＃39; contenteditable＆＃39;的父容器。   字段。

$("#...").contentEditable().change( myFunction );

Answer 3

这实际上似乎有效。不知道自从这些其他答案以来它是否是新事物，但它更清洁：

contentEditableTag.on('input', function(){
    console.log("input event");
});

每次按键都会触发，包括粘贴。

Answer 4

$('[contenteditable]').focusout(function() {
  var span = $(this);
  var statuses = ['bd-danger', 'bd-warning', 'bd-success'];
  statuses.forEach(function(s) {
    span.hasClass(s) ? span.removeClass(s) : '';
  })
  if (span.html().trim()) {
    if (span.html() === span.data('initial')) {
      span.addClass('bd-warning');
    } else {
      span.addClass('bd-success');
    }
  } else {
    span.addClass('bd-danger');
  }
});

.bd-danger {
  border: 1px #e81c22 solid;
  padding: 0 15px;
  border-radius: 5px;
}

.bd-warning {
  border: 1px #fbc658 solid;
  padding: 0 15px;
  border-radius: 5px;
}

.bd-success {
  border: 1px #04ad36 solid;
  padding: 0 15px;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>
    <strong>Content:</strong>
    <span contenteditable="true" data-initial="Edit this content">Edit this content</span>
  </p>
</div>

监控可信范围的变化？

4 个答案: