29

Internet Explorer では、Enter キーを押すたびに contentEditable DIV によって新しい段落 ( <p></p>) が作成されますが、Firefox では<br/> タグが作成されます。

hereで説明されているように、JavaScript を使用して Enter キーの押下をインターセプトし、代わりに range.pasteHTML を使用して を作成することができます<br/>。ただし、これを行うと元に戻すメニューが壊れます。Enter キーを押すと、それ以降は元に戻すことができなくなります。

元に戻すを中断せずに、Enter キーで contentEditable 要素に単一の改行を作成させるにはどうすればよいですか?

4

7 に答える 7

17

正確な解決策ではありませんが、別の回避策があります。マークアップを使用する場合:

<div contenteditable="true">
<div>
content
</div>
<div>

次に を押すと、タグの代わりにenter新しいタグが作成されます。divp

于 2010-02-16T00:19:55.870 に答える
5

Enter キーを押して改行するときは、Shift キーを押したままにします。段落全体では押したままにしないでください。段落を含む contenteditable 領域がある場合、この動作は Firefox でもデフォルトで同じです。

<div contenteditable="true">
    <p>If you are typing here</p>
<div>
于 2010-02-16T14:52:07.713 に答える
4

<BR>の代わりに使用<P>(IE9 でテスト済み。nbsp;後で古いバージョンで必要になる可能性があります<BR> (pasteHTML("<br>&nbsp;")))

keydown イベントで使用します。

if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}
于 2011-07-27T13:02:51.907 に答える
4

おそらく、編集可能なコンテンツをサーバーにポストすることになるでしょう。したがって、ユーザーが編集している間に段落タグや区切りタグが配置されているかどうかを実際に気にする必要はありません。送信前に (または必要に応じてサーバー上で) HTML を解析し、段落のインスタンスを区切りで置き換えることができるためです。これにより、ユーザーに対して UNDO キューが動作し続けますが、HTML を必要なだけクリーンにすることができます。

さらに、どの DIV 要素が contentEditable になるかを正確に知っていると仮定します。フォームが送信される前に、次のような関数を使用して各 contentEditable div を実行できます。

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

そして、これをループで呼び出します (これは、ceDiv と呼ぶ配列を使用して、すべての contentEditable DIV を反復処理します)、次のようにします。

ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again

その後：

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

これを改善するには (特に送信時にこれを正しく行いたくない場合)、そのような各 div の内容をいつでも好きなときに消去し (onblur など)、各 ceDiv の内容をその後で送信するための独自の非表示のフォーム要素。上記の独自の CSS の提案と組み合わせて使用​​すると、これがうまくいく場合があります。文字どおりの要件をそのまま保持するわけではありません (つまり、Javascript を取得して、IE が動作するように隠れてコード化されているのとは異なる動作をさせることはありません) が、すべての実用的な目的では効果は同じです。ユーザーは彼らが望むものを手に入れ、あなたはあなたが望むものを手に入れます。

あなたがそれに取り組んでいる間に、IE のスペース文字列もきれいにしたいかもしれません。ユーザーが複数のスペースを入力した場合 (ピリオドの後にスペースを入力する人もいます)、IE によって挿入されるのは [スペース][スペース] ではなく [スペース] 、最初のスペース文字 (String.fromCharCode(32)) と同じ数のスペースです。  スペースランに残っている実体。

于 2010-02-16T13:53:29.877 に答える
2

これを正しく理解することは不可能かもしれません。ただし、CSS を使用して、段落タグの周囲に組み込まれているマージンを削除することで、<p>タグを1 つの改行のように見せることができます。

p { margin: 0; }

このアプローチには欠点があります。ユーザーが contentEditable 要素内のテキストをコピー/ペーストする必要がある場合、テキストは要素内ではシングル スペースで表示されますが、要素の外ではダブル スペースで表示される場合があります。

さらに悪いことに、少なくとも場合によっては、IE は貼り付け中に二重改行を自動的に検出し、それらを<p>タグに置き換えます。これにより、貼り付けられたテキストの書式設定が台無しになります。

于 2010-02-14T21:40:44.340 に答える
1

IE は、キーを押すとテキスト ノードを<p>タグにバインドします。Enter改行を実現するにはShift+ Enter. Firefox は、キーを押すと<br>タグを追加します。Enter両方のブラウザーで動作を共通にするには、次の操作を行います。

次のマークアップを想定します。

<div id="editableDiv" contentEditable="true"></div>

Javascript [グローバルでページを肥大化させないように、以下のコードが関数クロージャーにあると仮定します]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

注:このスクリプトは、非推奨の使用のために jQuery < 1.9 より前のものです。$.browser

于 2012-03-26T12:12:02.513 に答える
0

<span contenteditable="true"></span>Internet Explorerをご利用の際はご検討ください。フォーカスが変に見えるため、Chrome でこれを実行したくない場合があります。onfocusおそらく独自のonblurコードを実装したいと思うでしょう。

于 2011-12-13T18:44:19.093 に答える