javascript - contenteditable'in ENTER tuşuna basıldığında <div> eklemesini önleme - Chrome

Bir contenteditable öğem var ve ne zaman bir şeyler yazıp ENTER tuşuna bassam yeni bir <div> oluşturuyor ve yeni satırdaki metni oraya yerleştiriyor. Bunu bir türlü sevmiyorum.

Bunun olmasını önlemek ya da en azından sadece <br> ile değiştirmek mümkün mü?

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

Not: Bu Firefox'ta bir sorun değildir.

Cevap #1

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 buraya tıklayın

Cevap #2

contenteditable öğesine display:inline-block; stilini ekleyin, Chrome'da otomatik olarak div, p ve span oluşturmaz.

Cevap #3

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

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

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

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

Cevap #4

Bu tüm major tarayıcılarda (Chrome, Firefox, Safari, Edge) çalışır

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 içinde son <br> etiketi bulunabilir. Ancak gerekirse bunu kısaltmak için kod ekleyebilirsiniz.

Sonraki <br> öğesini kaldırmak için bu cevabı kontrol edin https://stackoverflow.com/a/61237737/670839

Cevap #5

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

Varsayılan davranışın yerine paragrafa sahip olmayı sağlar.

Chrome'da enter tuşunun varsayılan davranışı şudur:

<div>
    <br>
</div>

O komutla olacak

<p>
    <br>
</p>

Artık daha lineer olduğu için, sadece <br> kullanmanız yeterli olur.

Cevap #6

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/

Cevap #7

W3C Editör Taslağında, ContentEditable içine durum eklemekle ilgili bazı bilgiler var ve enter tuşuna basıldığında tarayıcının yeni eleman eklemesini önlemek için plaintext-only kullanabilirsiniz.

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

Cevap #8

enter yerine sadece tek bir <br> etiketi eklemek için veya metninizi <p> etiketleriyle sarmak için shift+enter kullanın.

İlgili makaleler