2

我有一个span. contenteditable="true"我试图附加一个change事件。但根据 jQuery 文档，更改仅适用于表单输入。还有什么办法吗？

这是一个jsfiddle：http: //jsfiddle.net/vQuEA/

4

4 回答 4

9

将此块添加到您的页面：

$('[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的事件侦听器。focusblurkeyuppaste

在focus当前内部 html 存储为元素上的“之前”数据。

during blur//当前内部 htmlkeyup与paste“之前”数据进行比较，如果不同，change则触发事件。

于 2012-12-25T02:22:49.173 回答
1

这实际上似乎有效。不确定这是否是自这些其他答案以来的新事物，但它更干净：

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

每次击键时触发，包括粘贴。

于 2017-01-05T09:38:35.593 回答
0

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

jQuery contentEditable 自动在“contenteditable”字段上添加事件并返回更改的数据以供进一步处理（和保存）

用法

在其基本实现中，插件方法 contentEditable() 附加到具有所有“contenteditable”字段的父容器。

$("#...").contentEditable().change( myFunction );
于 2014-08-17T02:00:41.860 回答
0 

$('[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>

于 2021-03-31T09:04:06.763 回答