6

contentEditable属性が設定されたdivがあります。

私が抱えている問題は、入力した最初の行がタグでラップされないことですが、後続の行はラップされます。

したがって、次のように入力します。

qwerty
zxcv
asdfg

結果：

<div class="editable" contentEditable="true">
    qwerty
    <div>zxcv</div>
    <div>asdfg</div>
</div>

だから私はqwertyなるためにラインが必要です<div>qwerty</div>

4

8 に答える 8

8

Chrome で div を追加するだけで問題が発生しました。div に br タグが含まれている場合にのみ機能しました。

<div class="editable" contentEditable="true">
  <div>
    <br>
  </div>
</div>

@nicholas_r の言うとおりです。編集可能な div の最後の文字を削除すると、最初に追加された div も削除されます。最後の「バックスペース」をキャッチすることで、これを回避できます。jqueryを使用してそれを行う簡単なソリューション：

$(".editable").on('keydown', function(event) {
  if (event.keyCode === 8 && $(this).html() == '<div><br></div>') {
    event.preventDefault();
  }
}
于 2014-07-18T14:22:48.313 に答える
4

それが役立つ場合は、次を実行すると、ラップされていない div をラップできます。キープレスなどでトリガーすると、ユーザーがdivからすべてのコンテンツを削除しても機能します。

 $(".editable").contents().filter(function() {
    return this.nodeType == 3;
 }).wrap('<div></div>');
于 2013-11-18T06:51:50.317 に答える
2

div次のように、内部にa を含む要素から始める場合:

<div class="editable" contentEditable="true"> <div></div> </div>

入力した最初の行は、div.

アップデート：

これはブラウザ固有です。質問が投稿された時点ではほとんどのブラウザーで機能していましたが、最新のブラウザー バージョンでは必ずしも機能するとは限りません。伝える最善の方法は、それをテストすることです。

于 2012-09-26T12:52:12.410 に答える
1

私はこのようなことをしましたが、テキストの最初の行に常に div ラッパーがあることを確認するのに非常にうまく機能します。

このようにして、ユーザーがフィールドとその空白 (初期状態) をクリックすると、カーソルが新しい div 内にあることを確認するために空白が挿入されます。

$editable.on('focus', function() {
  if ($(this).text().trim() === '') {
    console.log('editable is blank, insert a div');
    $(this).append($('<div>&nbsp;</div>'));  
  }
});

データを保存する前に、先頭のスペースを削除できます (重要な場合)。

于 2015-01-24T01:01:54.530 に答える