ENTERでcontenteditableが<div>を追加できないようにする-Chrome

私が持っているcontenteditable要素を、と私はいくつかのものを入力するたびにヒットし、ENTERそれが新しいを作成<div>し、そこに新しい行のテキストを配置します。これは少し気に入らない。

これが起こらないようにすることはできますか、少なくともそれを単に<br>？

こちらがデモですhttp://jsfiddle.net/jDvau/

注：これは、Firefoxの問題ではありません。

これを試して：

$('div[contenteditable]').keydown(function(e) {
    // trap the return key being pressed
    if (e.keyCode === 13) {
        // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
        document.execCommand('insertHTML', false, '<br/>');
        // prevent the default behaviour of return key pressed
        return false;
    }
});

デモはこちらをクリックしてください

CSSを変更するだけでこれを行うことができます：

div{
    background: skyblue;
    padding:10px;
    display: inline-block;
}

pre{
    white-space: pre-wrap;
    background: #EEE;
}

http://jsfiddle.net/ayiem999/HW43Q/

スタイルを追加display:inline-block;するためにcontenteditable、それは生成されませんdiv、pとspan自動的にクロームインチ

これを試して：

$('div[contenteditable="true"]').keypress(function(event) {

    if (event.which != 13)
        return true;

    var docFragment = document.createDocumentFragment();

    //add a new line
    var newEle = document.createTextNode('\n');
    docFragment.appendChild(newEle);

    //add the br, or p, or something else
    newEle = document.createElement('br');
    docFragment.appendChild(newEle);

    //make the br replace selection
    var range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.insertNode(docFragment);

    //create a new range
    range = document.createRange();
    range.setStartAfter(newEle);
    range.collapse(true);

    //make the cursor there
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    return false;
});

http://jsfiddle.net/rooseve/jDvau/3/

document.execCommand('defaultParagraphSeparator', false, 'p');

代わりに段落を持つようにデフォルトの動作を上書きします。

chromeでは、Enterのデフォルトの動作は次のとおりです：

<div>
    <br>
</div>

そのコマンドを使用すると、

<p>
    <br>
</p>

全体的に線形になっているので、<br>必要なものだけを簡単に持つことができます。

代わりにshift+ enterを使用してenter、単一の<br>タグを挿入するか、テキストを<p>タグで囲みます。

やり方contenteditableを押す振る舞うが、enterブラウザに依存しては、<div>WebKitの（クロム、サファリ）とIEで発生します。

私はこの数か月前に苦労し、それをこのように修正しました：

//I recommand you trigger this in case of focus on your contenteditable
if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) {
    //Add <br> to the end of the field for chrome and safari to allow further insertion
    if(navigator.userAgent.indexOf("webkit") > 0)
    {
        if ( !this.lastChild || this.lastChild.nodeName.toLowerCase() != "br" ) {
            $(this).html( $(this).html()+'<br />' );
        }
    }

    $(this).keypress( function(e) {
        if( ( e.keyCode || e.witch ) == 13 ) {
            e.preventDefault();

            if( navigator.userAgent.indexOf("msie") > 0 ) {
                insertHtml('<br />');
            }
            else {
              var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement('br');

              range.deleteContents();
              range.insertNode(br);
              range.setStartAfter(br);
              range.setEndAfter(br);
              range.collapse(false);

              selection.removeAllRanges();
              selection.addRange(range);
            }
        }
    });
}

私はそれが役に立てば幸いです、そしてそれが必要とされるほど明確でないなら私の英語を申し訳ありません。

編集：削除されたjQuery関数の修正jQuery.browser

ホットキーのハンドリングにマウストラップを使用したい：https ://craig.is/killing/mice

次に、Enterイベントをインターセプトして、コマンドinsertLineBreakを実行します。

Mousetrap.bindGlobal('enter', (e)=>{
  window.document.execCommand('insertLineBreak', false, null);
  e.preventDefault();
});

すべてのコマンド：https : //developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Chrome 75と次の編集可能な要素を使用して動作します。

<pre contenteditable="true"></pre>

insertHTMLを使用することもできます。

window.document.execCommand('insertHTML', false, "\n");

divにデフォルトの防止を追加する

document.body.div.onkeydown = function(e) {
    if ( e.keycode == 13 ){
        e.preventDefault();
            //add a <br>
        div = document.getElementById("myDiv");
        div.innerHTML += "<br>";
    }
}

スタイリング（Css）を使用して問題を修正します。

div[contenteditable=true] > div {
  padding: 0;
} 

実際、Firefoxはblock要素のbreakを追加しますが、
Chromeは各セクションをタグで囲みます。あなたはCSSは背景色と一緒にdivに10pxのパディングを与えます。

div{
  background: skyblue;
  padding:10px;
}

あるいは、jQueryで同じ望ましい効果を複製できます。

var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);

ここにあなたのフィドルのフォークがありますhttp://jsfiddle.net/R4Jdz/7/

<p>タグを使用するのではなく、各行に個別のタグを設定<br>して、すぐにブラウザーの互換性を高めることができます。

これを行うに<p>は、contenteditable div内にデフォルトのテキストを含むタグを配置します。

たとえば、次の代わりに：

<div contenteditable></div>

使用する：

<div contenteditable>
   <p>Replace this text with something awesome!</p>
</div>

jsfiddle

Chrome、Firefox、およびEdgeでテストされ、2番目はそれぞれ同じように動作します。

ただし、1つ目は、Chromeでdivを作成し、Firefoxで改行を作成し、Edgeでdivを作成し、カーソルを次のdivに移動するのではなく、現在のdivの先頭に戻します。

Chrome、Firefox、Edgeでテスト済み。

段落を<p>タグでラップできます。たとえば、divの代わりに新しい行に表示され
<div contenteditable="true"><p>Line</p></div>
ます。例：新しい文字列を挿入した後：
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

inserHTMLコマンド・ソリューションを使用すると、ネストされた持っているいくつかの奇妙な行いcontenteditableの要素を。

私はここで複数の回答からいくつかのアイデアを取り入れましたが、これは今のところ私のニーズに合っているようです：

element.addEventListener('keydown', function onKeyDown(e) {

    // Only listen for plain returns, without any modifier keys
    if (e.which != 13 || e.shiftKey || e.ctrlKey || e.altKey) {
        return;
    }

    let doc_fragment = document.createDocumentFragment();

    // Create a new break element
    let new_ele = document.createElement('br');
    doc_fragment.appendChild(new_ele);

    // Get the current selection, and make sure the content is removed (if any)
    let range = window.getSelection().getRangeAt(0);
    range.deleteContents();

    // See if the selection container has any next siblings
    // If not: add another break, otherwise the cursor won't move
    if (!hasNextSibling(range.endContainer)) {
        let extra_break = document.createElement('br');
        doc_fragment.appendChild(extra_break);
    }

    range.insertNode(doc_fragment);

    //create a new range
    range = document.createRange();
    range.setStartAfter(new_ele);
    range.collapse(true);

    //make the cursor there
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    e.stopPropagation();
    e.preventDefault();

    return false;
});

// See if the given node has a next sibling.
// Either any element or a non-empty node
function hasNextSibling(node) {

    if (node.nextElementSibling) {
        return true;
    }

    while (node.nextSibling) {
        node = node.nextSibling;

        if (node.length > 0) {
            return true;
        }
    }

    return false;
}

ckeditorを使用してみてください。また、SOFでこのようなフォーマットを提供します。

https://github.com/galetahub/ckeditor

最初に、ユーザーが入力するすべてのキーをキャプチャして、Enterキーが押されているかどうかを確認する必要があります。次に、<div>作成を防ぎ、独自の<br>タグを作成します。

1つの問題があります。それを作成すると、カーソルは同じ位置に留まるため、Selection APIを使用してカーソルを最後に配置します。

<br>テキストの最後にタグを追加することを忘れないでください。そうしないと、最初の入力で新しい行が作成されません。

$('div[contenteditable]').on('keydown', function(e) {
    var key = e.keyCode,
        el  = $(this)[0];
    // If Enter    
    if (key === 13) {
        e.preventDefault(); // Prevent the <div /> creation.
        $(this).append('<br>'); // Add the <br at the end

        // Place selection at the end 
        // http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
        if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(false);
            textRange.select();
        }
    }
});

フィドル

これはブラウザ向けのHTML5エディタです。テキストを<p>...</p>でラップすると、Enterキーを押すたびに表示されます<p></p>。また、エディターは、Shift + Enterキーを押すたびに挿入されるように機能します<br />。

<div contenteditable="true"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
<br /><br />
Type some stuff, hit ENTER a few times, then press the button.
</p>
</div>

これを確認してください：http : //jsfiddle.net/ZQztJ/

これはすべての主要ブラウザ（Chrome、Firefox、Safari、Edge）で機能します

document.addEventListener('keydown', event => {
  if (event.key === 'Enter') {
    document.execCommand('insertLineBreak')
    event.preventDefault()
  }
})

<div class="element" contenteditable="true">Sample text</div>
<p class="element" contenteditable="true">Sample text</p>

不便な点が1つあります。編集が終了すると、要素の<br>内部に末尾が含まれる場合があります。ただし、必要に応じて、コードを追加して削減することができます。

この回答をチェックして、末尾のhttps://stackoverflow.com/a/61237737/670839を削除して<br> ください

if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
   var range = document.getSelection();
   range.pasteHTML(range.htmlText + '<br><br>');
}
else if(navigator.userAgent.toLocaleLowerCase().indexOf('trident') > -1)                           {
   var range = document.getSelection().getRangeAt(0); //get caret
   var nnode = document.createElement('br');
   var bnode = document.createTextNode('\u00A0'); //&nbsp;
   range.insertNode(nnode);
   this.appendChild(bnode);
   range.insertNode(nnode);                                
}
else
   document.execCommand('insertHTML', false, '<br><br>')

どこにthisどの手段の実際のコンテキストがありますdocument.getElementById('test');。

それを行う別の方法

$('button').click(function(){
    $('pre').text($('div')[0].outerHTML)
});

$("#content-edit").keydown(function(e) {
    if(e.which == 13) {
       $(this).find("div").prepend('<br />').contents().unwrap();
      }
});

http://jsfiddle.net/jDvau/11/

Enterキーごとにコンテンツ編集可能なDivで新しいDivを作成しない：解決策私が見つけたのは非常に簡単です：

var newdiv = document.createElement("div"); 
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);

この--- innerHTMLコンテンツにより、Enterキーごとにコンテンツ編集可能なDivでNew Divが作成されなくなります。

W3Cエディターのドラフトには、ContentEditableへの状態の追加に関する情報がいくつかあります。Enterキーを押したときにブラウザーが新しい要素を追加しないようにするには、を使用できますplaintext-only。

<div contentEditable="plaintext-only"></div>

この動作を完全に防ぐことができます。

このフィドルを見る

$('<div class="temp-contenteditable-el" contenteditable="true"></div>').appendTo('body').focus().remove();