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

現在の内部 html の間focus、要素の「前」のデータとして保存されます。

blur//実行中keyup、paste現在の内部 html が「前」のデータと比較され、異なる場合は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 に答える