4

contenteditable=trueインライン編集を可能にするために(RTE目的で)divを設定しています。

ブラウザーによって、Enter キーの押し方が異なり、FF 挿入<br>と IE 挿入が異なることを認識しています。<p>

私が経験している問題は、さまざまな行にまたがってテキストを入力するときです。

たとえば、テキストの場合:

line 1
line 2

line 3


line 4

FF で、上記を入力して を切り替えるcontenteditable=falseと、行の書式が期待どおりに維持されます。

ただし、IE で複数行のテキストを編集してから を設定するcontenteditable=falseと、空白行が折りたたまれます。例えば:

line 1
line 2   
line 3    
line 4

次にリセットcontenteditable=trueすると、これらの折りたたまれた行が復元されます。

<p>私はそれがIEでの使用と関係があると推測していcontenteditable=falseます.

4

1 に答える 1

1

ENTER をキャッチし、BR代わりに<P>&nbsp;</P>.

pad.addEventListener('keydown',keyDown,false);

function keyDown(e){
    if(e.keyCode!=13) return;
    pad.innerHTML+='<br />\b';
    e.stopPropagation();
    e.preventDefault();
    return false;
}

<div id="pad" contenteditable="true"></div>

トリックは、行末に「\b」(バックスペース) を追加することです。そうしないと、ユーザーが別のキーを押す前に、IE は改行を作成しません。ただし、これらのバックスペースは、innerHTML後で使用するときに問題を引き起こしています。バックスペースを削除するには、それらを""RegExp に置き換えるだけです:

padsInnerHTML=pad.innerHTML.replace(/LITERAL_BACKSPACE_CHARACTER/g,'');

正規表現では、リテラルのバックスペース文字が必要になりますが、機能し/\b/ません。バックスペース文字を実際に確認するには、これを使用して Opera でコードを実行し、keyDown()いくつかの文字を入力して ENTER を押し、padその文字をコードにコピー アンド ペーストします。

このコードは IE でのみ実行する必要があることに注意してください。他のブラウザーでは改行が台無しになります。


なぜこれが機能しているのか、わかりません。IE は の後<BR />に非印刷文字を追加しているようです。これは、ENTER を押した後に即座に改行を作成するために削除する必要があります。

于 2012-05-17T13:25:05.160 に答える