Запретить добавление содержимого <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 (chrome, safari) и 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);
            }
        }
    });
}

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

РЕДАКТИРОВАТЬ : Исправление удаленной функции jQueryjQuery.browser

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

Для этого нужно поставить <p> тег с некоторым текстом по умолчанию внутри contenteditable div.

Например, вместо:

<div contenteditable></div>

Использование:

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

jsfiddle

Протестировано в Chrome, Firefox и Edge, второй работает одинаково в каждом.

Первый, однако, создает div в Chrome, создает разрывы строк в Firefox, а в Edge создает div, и курсор возвращается в начало текущего div, а не перемещается в следующий.

Протестировано в Chrome, Firefox и Edge.

Мне нравится использовать Mousetrap для работы с горячими клавишами: https://craig.is/killing/mice

Затем я просто перехватываю событие ввода, выполняя команду 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. Пример:
<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

Сначала нам нужно захватить каждый ввод ключевого пользователя, чтобы увидеть, нажата ли клавиша ввода, затем мы предотвращаем <div>создание и создаем свой собственный<br> тег.

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

Есть одно неудобство. После завершения редактирования элементы могут содержать окончание <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);

Это --- содержимое innerHTML предотвращает создание нового Div в редактируемом содержимом Div при каждой клавише ввода.

В черновике редактора W3C есть некоторая информация о добавлении состояний в ContentEditable , а также о том, чтобы запретить браузеру добавлять новый элемент при нажатии клавиши ввода, вы можете использовать plaintext-only.

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

Можно полностью предотвратить такое поведение.

Посмотри на эту скрипку

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