ENTER - Chrome'da içerikli <div> eklemeyi önleyin

Bir contenteditableelemanım var ve ne zaman bir şeyler yazsam ve vurduğumda ENTERyeni bir tane yaratıyor <div>ve yeni satır metnini oraya yerleştiriyor. Bundan hiç hoşlanmadım.

Bunun olmasını önlemek veya en azından bir ile değiştirmek mümkün müdür <br>?

İşte demo http://jsfiddle.net/jDvau/

Not: Bu, firefox'ta bir sorun değildir.

Bunu dene:

$('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;
    }
});

Demo için burayı tıklayın

Bunu sadece bir CSS değişikliğiyle yapabilirsiniz:

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

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

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

Stil ekleyin display:inline-block;etmek contenteditable, bu oluşturmaz div, pve spanotomatik olarak Chrome'da.

Bunu dene:

$('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');

Bunun yerine paragrafa sahip olmak için varsayılan davranışı geçersiz kılar.

Chrome'da enter'daki varsayılan davranış şudur:

<div>
    <br>
</div>

Bu komutla olacak

<p>
    <br>
</p>

Artık daha doğrusal olduğu için, yalnızca <br>ihtiyacınız olana sahip olmak kolaydır .

Kullanım shift+ enteryerine entersadece tek bir koyun <br>içinde etiketi veya daki metni kaydırma <p>etiketleri.

contenteditableBastığınızda nasıl davranacağı entertarayıcılara bağlıdır <div>, webkit (chrome, safari) ve IE'de olur.

Birkaç ay önce bununla mücadele ettim ve şu şekilde düzelttim:

//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);
            }
        }
    });
}

Umarım yardımcı olur ve gerektiği kadar net değilse ingilizcem için özür dilerim.

DÜZENLEME : Kaldırılan jQuery işlevinin düzeltilmesijQuery.browser

<p>Etiketleri kullanmak yerine her satır için ayrı etiketlere sahip olabilir <br>ve kutudan daha iyi bir tarayıcı uyumluluğu elde edebilirsiniz.

Bunu yapmak için <p>, memnun edici div'in içine bazı varsayılan metinler içeren bir etiket koyun .

Örneğin, bunun yerine:

<div contenteditable></div>

kullanın:

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

jsfiddle

Chrome, Firefox ve Edge'de test edilmiştir ve ikincisi her birinde aynı şekilde çalışır.

Ancak ilki, Chrome'da div'ler oluşturur, Firefox'ta satır sonları oluşturur ve Edge'de div'ler oluşturur ve imleç bir sonrakine geçmek yerine geçerli div'in başına geri getirilir.

Chrome, Firefox ve Edge'de test edilmiştir.

Kısayol tuşlarını işlemek için Fare Kapanı'nı kullanmayı seviyorum: https://craig.is/killing/mice

Ardından, enter olayını yakalayıp insertLineBreak komutunu çalıştırıyorum :

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

Tüm komutlar: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Chrome 75 ve aşağıdaki düzenlenebilir öğeyi kullanarak çalışır:

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

Ayrıca insertHTML kullanmak da mümkündür :

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

div'e bir önleme varsayılanı ekle

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

Sorunu düzeltmek için stil (Css) kullanırım.

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

Firefox gerçekten bir blok öğesi sonu ekler
, Chrome ise her bölümü bir etiketle sarar. Sen css divs bir dolgu verir 10px arka plan rengiyle birlikte.

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

Alternatif olarak, istenen aynı etkiyi jQuery'de çoğaltabilirsiniz:

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

İşte kemanınızın bir çatalı http://jsfiddle.net/R4Jdz/7/

Paragraflarınızı <p>etiketle sarmalayabilirsiniz, örneğin div yerine yeni satırda görünecektir Örnek:
<div contenteditable="true"><p>Line</p></div>
Yeni dize ekledikten sonra:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

inserHTMLKomut çözümü iç içe olması tuhaflaştırıyor contenteditableelemanları.

Burada birçok cevaptan bazı fikirler aldım ve bu şimdilik ihtiyaçlarıma uyuyor gibi görünüyor:

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 kullanmayı deneyin. Ayrıca SOF'da bunun gibi biçimlendirme sağlar.

https://github.com/galetahub/ckeditor

Öncelikle, enter'a basılıp basılmadığını görmek için girilen her anahtarı yakalamamız gerekiyor, ardından <div>oluşturmayı engelliyoruz ve kendi <br>etiketimizi oluşturuyoruz.

Bir sorun var, onu oluşturduğumuzda imlecimiz aynı konumda kalıyor, bu yüzden imlecimizi sona yerleştirmek için Seçim API'sini kullanıyoruz .

<br>Metninizin sonuna bir etiket eklemeyi unutmayın çünkü yapmazsanız ilk giriş yeni bir satır oluşturmaz.

$('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();
        }
    }
});

Vaktini boşa harcamak

Bu, tarayıcı tarafından yönlendirilen HTML5 editörüdür. Metninizi ile kaydırabilirsiniz <p>...</p>, ardından ENTER tuşuna her bastığınızda alırsınız <p></p>. Ayrıca, düzenleyici bu şekilde çalışır, ÜST KARAKTER + ENTER tuşlarına bastığınızda bunu ekler <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>

Şunu kontrol edin: http://jsfiddle.net/ZQztJ/

Bu, tüm büyük tarayıcılarda çalışır (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>

Bir rahatsızlık var. Düzenlemeyi bitirdikten sonra, öğelerin <br>içinde bir son bulunabilir . Ancak gerekirse, bunu azaltmak için kod ekleyebilirsiniz.

Sondaki https://stackoverflow.com/a/61237737/670839'u kaldırmak için bu yanıtı kontrol <br> edin

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>')

thisYani gerçek bağlam nerede document.getElementById('test');.

Bunu yapmanın başka bir yolu

$('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/

Her enter tuşunda içerik düzenlenebilir Div'de Yeni Div oluşturulmasını önleyin: Bulduğum çözüm çok basit:

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

Bu --- innerHTML içeriği, her giriş tuşunda düzenlenebilir Div içeriğinde Yeni Div oluşturulmasını engeller.

W3C Editör Taslağında, ContentEditable'a durum ekleme hakkında bazı bilgiler vardır ve enter tuşuna basıldığında tarayıcının yeni eleman eklemesini önlemek için kullanabilirsiniz plaintext-only.

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

Bu davranışı tamamen engellemek mümkündür.

Bu kemanı görün

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