Не допускайте додавання <div> на ENTER - 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автоматично в Chrome.

Спробуйте це:

$('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, типова поведінка при введенні:

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

Я сподіваюся, що це допоможе, і вибачте за мою англійську, якщо це не так зрозуміло, як потрібно.

EDIT : Виправлення видаленої функції jQueryjQuery.browser

Ви можете мати окремі <p>теги для кожного рядка, а не використовувати <br>теги та отримувати більшу сумісність браузера поза вікном.

Для цього помістіть <p>тег з деяким текстом за замовчуванням всередині вмісту, що містить вміст

Наприклад, замість:

<div contenteditable></div>

Використання:

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

jsfiddle

Тестується в Chrome, Firefox та Edge, а другий працює однаково у кожному.

Перший, однак, створює діви в Chrome, створює розриви рядків у Firefox, а в Edge створює divs і курсор ставиться назад на початку поточного div, а не переходить до наступного.

Тестували в Chrome, Firefox та Edge.

Мені подобається використовувати мишоловку для обробки гарячих клавіш: 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 дійсно додає перерву блочного елемента
, тоді як Chrome обгортає кожен розділ у тег. Ви css надаєте divs підкладку 10 пікселів разом із кольором фону.

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>тегом, наприклад, він буде поміщатися в новому рядку замість діва Приклад:
<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> тег.

Є одна проблема: коли ми створюємо його, наш курсор залишається в тому ж самому положенні, тому ми використовуємо 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>

Є одна незручність. Після закінчення редагування елементи можуть містити закінчення <br>всередині. Але ви можете додати код, щоб обрізати це, якщо вам потрібно.

Перевірте цю відповідь, щоб видалити останній <br> https://stackoverflow.com/a/61237737/670839

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/

Запобігати створенню нового Div у форматі Div для редагування вмісту на кожній клавіші введення: Рішення, яке я знайшов, дуже просте:

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

Цей --- внутрішній вміст HTMLML перешкоджає створенню New Div у вмісті, редагованому Div, на кожній клавіші введення.

У проекті редактора W3C міститься деяка інформація про додавання станів у ContentEditable , а також запобігання веб-переглядачу для додавання нового елемента при натисканні клавіші enter, яку ви можете використовувати plaintext-only.

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

Цю поведінку цілком можна запобігти.

Дивіться цю загадку

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