web-dev-qa-db-ja.com

さまざまなブラウザでEnterキーを押した後、contenteditableブロックの動作を変更する方法

Firefoxの<div contenteditable="true"> </div>でEnterキーを押すと、<br />が生成されます-それで問題ありません。しかし、ChromeまたはIE新しい<div>または<p>が作成されます。ChromeおよびIEはFirefoxのように動作します。

javascriptcross-browsercontenteditable
30
liysd

ダグラスが以前に言ったように、顧客が編集可能なページで新しい段落を開始すると、ブラウザは前のタグのクローンを作成しようとします。不一致は、ブラウザに逸脱するものがない場合に発生します-例：最初にページ本文が空のとき。この場合、ブラウザによって動作が異なります。IEはすべての文字列を<p>タグにラップし始め、Chromeは各行を<div>にラップします。

クロスブラウザーエクスペリエンスを向上させるために、WebKit開発者は DefaultParagraphSeparator コマンドを導入しました。 Chromeのページ読み込み時に次のJavaScriptを使用して、デフォルトの段落区切り文字を<p>タグに変更できます。

document.execCommand('defaultParagraphSeparator', false, 'p');
25
Sergey Volodko

以下では、すべての主要なブラウザでEnterキーが押され、その直後にキャレットを配置しようとすると、<br>が追加されます。ただし、WebKit、OperaおよびIEはすべて、<br>の後にキャレットを正しく配置する際に問題があります。次のコードでは修正を試みていません。 。

function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }

        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

var el = document.getElementById("your_editable_element");

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keypress", enterKeyPressHandler, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeypress", enterKeyPressHandler);
}
14
Tim Down

優れたリファレンスは、contenteditableのここにあります。

http://blog.whatwg.org/the-road-to-html-5-contenteditable

これはここで本当に素晴らしいAPIにつながります http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/ http：// dev .opera.com/articles/view/rich-html-editing-in-the-browser-part-2 /

これらすべてを読むのに30分から1時間かかる場合は、tinyMCEやckeditorなどのくだらないサードパーティのエディターを使用する必要はまったくありません。自分でビルドしてカスタマイズすることができ、率直に言って簡単です。また、サードパーティのWYSIWYGエディターのすべての雑然とした不要なAPIを処理するよりも、最初から実行する方が高速です。

8
brandon

バグを追跡するよりも幸せになりたい場合は:-) FFにpまたはdivも使用させることをお勧めします。多数決であることが判明したからだけではありません:-)

その理由は、XMLの目でタグを見ると（タグで保護されていないテキストのように、混合データモデルを挿入する）、brだけが境界線で違法であり、その脅威は何年もの間（すべてのブラウザーで）完全に向かっているためです。 XML化。

実際のアプリによっては、完全に形成されたスタイルで、確かにいくつかの初期コンテンツを含むdivを配置することを試みる価値があるかもしれません-「ここにコメントを入力してください」のような灰色のテキストが表示され、2番目に消えるページを見た場合それをクリックします（またはレミアン-それは設計上の決定です）。

その部分の理由は、「contenteditable」のセマンティクスが「すでにコンテンツを持っている=>ブラウザには何をすべきかを知るのに十分な情報がある」ということです。したがって、ブラウザはコンテンツがない場合に何かをするために最善を尽くしますが、状況は大きくなります。よりランダム。

3
ZXX

Divにすでに段落タグがあり、フォーカスがその段落タグ内にあるときにユーザーがReturnキーを押すと、Firefoxは別の段落タグを挿入すると思います。だから、あなたがこれを持っているなら：

<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

フォーカスすると、プレスリターン、Firefoxは3番目の段落を挿入します。

段落タグに最小の高さを指定することで、段落タグに& nbsp ;を含めることを回避できる場合があります。また、1つだけにすることで回避できる場合があります。前回これを見たとき、私は満足のいく行動の底に達することはありませんでした。 div内に少なくとも1つの段落タグを適用するには、おそらくJavaScriptが必要になります。

2
Douglas