Evite adicionar conteúdo em ENTER – Chrome

Eu tenho um elemento contenteditable , e sempre que eu digito algumas coisas e teco ENTER , cria um novo

e coloca o texto da nova linha lá. Eu não gosto disso nem um pouco.

É possível evitar que isso aconteça ou, pelo menos, apenas substituí-lo por um produto?

Aqui está uma demonstração http://jsfiddle.net/jDvau/

Nota: isso não é um problema no firefox.

Tente isso

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

'); // prevent the default behaviour of return key pressed return false; } });

Demo Here

Você pode fazer isso apenas com uma alteração de CSS:

 div{ background: skyblue; padding:10px; display: inline-block; } pre{ white-space: pre-wrap; background: #EEE; } 

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

Adicionar display:inline-block; estilo display:inline-block; para contenteditable , ele não irá gerar div , p e span automaticamente no Chrome.

Tente isto:

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

Use shift + enter em vez de enter para apenas colocar uma única tag do Google ou agrupar seu texto nas tags

.

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

Ele substitui o comportamento padrão para ter parágrafo.

No chrome, o comportamento padrão ao entrar é:

 

Com esse comando, vai ser

 


Agora que é mais linear, é fácil ter apenas o que você precisa.

A maneira que contenteditable se comporta quando você pressiona enter depende dos navegadores, o

acontece no webkit (chrome, safari) e no IE.

Eu lutei com isso há alguns meses e eu corrigi da seguinte maneira:

 //I recommand you trigger this in case of focus on your contenteditable if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) { //Add 
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()+'
' ); } } $(this).keypress( function(e) { if( ( e.keyCode || e.witch ) == 13 ) { e.preventDefault(); if( navigator.userAgent.indexOf("msie") > 0 ) { insertHtml('
'); } 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); } } }); }

Espero que ajude, e desculpe pelo meu inglês, se não for tão claro quanto necessário.

EDIT : Correção da function jQuery removida jQuery.browser

Eu usaria styling (Css) para corrigir o problema.

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

O Firefox realmente adiciona uma quebra de elemento de bloco
, enquanto o Chrome envolve cada seção em uma tag. Você css dá divs um preenchimento de 10px junto com a cor de fundo.

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

Alternativamente, você pode replicar o mesmo efeito desejado no jQuery:

 var style = $(''); $('html > head').append(style); 

Aqui está um garfo do seu violino http://jsfiddle.net/R4Jdz/7/

Tente usar o ckeditor. Ele também fornece formatação como essa no SOF.

https://github.com/galetahub/ckeditor

Você pode quebrar seus parágrafos com a tag

por exemplo, seria aparecer em uma nova linha em vez de div. Exemplo:

Line


Depois de inserir uma nova string:

Line

New Line

Você pode ter marcas

separadas para cada linha, em vez de usar tags do Google e obter uma maior compatibilidade do navegador fora da checkbox.

Para fazer isso, coloque uma tag

com algum texto padrão dentro da div editável pelo conteúdo.

Por exemplo, em vez de:

 

Usar:

 

Replace this text with something awesome!

jsfiddle

Testado no Chrome, Firefox e Edge, e o segundo funciona da mesma maneira em cada um.

O primeiro, no entanto, cria divs no Chrome, cria quebras de linha no Firefox e no Edge cria divs e o cursor é colocado de volta no início do div atual, em vez de passar para o próximo.

Testado no Chrome, Firefox e Edge.

adicionar um padrão de prevenção para o div

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

Primeiro, precisamos capturar todos os principais usuários que entram para ver se a input está pressionada, então evitamos a criação do

e criamos nossa própria tag do Google.

Há um problema: quando criamos o cursor, fica na mesma posição, então usamos a Selection API para posicionar o cursor no final.

Não se esqueça de adicionar uma tag no final do seu texto, porque se você não fizer a primeira input, não fará uma nova linha.

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

Violino

Este é um editor HTML5 dirigido por navegador. Você pode quebrar seu texto com

...

, então, sempre que você pressionar ENTER, você obtém

. Além disso, o editor funciona dessa maneira sempre que você pressiona SHIFT + ENTER, ele insere
.

 

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!

Type some stuff, hit ENTER a few times, then press the button.

Verifique isso: http://jsfiddle.net/ZQztJ/

 if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) { var range = document.getSelection(); range.pasteHTML(range.htmlText + '

'); } 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'); //  range.insertNode(nnode); this.appendChild(bnode); range.insertNode(nnode); } else document.execCommand('insertHTML', false, '

')

Onde this é o contexto real que significa document.getElementById('test'); .

Outra maneira de fazer isso

 $('button').click(function(){ $('pre').text($('div')[0].outerHTML) }); $("#content-edit").keydown(function(e) { if(e.which == 13) { $(this).find("div").prepend('
').contents().unwrap(); } });

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

Eu tive esse mesmo problema e encontrei a solução (CHROME, MSIE, FIREFOX), siga meu código no link.

 $(document).on('click','#myButton',function() { if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) var str = $('#myDiv').html().replace(/
/gi,'').replace(/
/gi,'
').replace(/<\/div>/gi,''); else if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) var str = $('#myDiv').html().replace(/<\/br>/gi,'').replace(/
/gi,'
').replace(/<\/br>/gi,''); else if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) var str = $('#myDiv').html().replace(/
/gi,'').replace(/

/gi,'
').replace(/<\/p>/gi,''); $('#myDiv2').removeClass('invisible').addClass('visible').text(str); $('#myDiv3').removeClass('invisible').addClass('visible').html(str); });

https://jsfiddle.net/kzkxo70L/1/

Impedir nova criação Div no conteúdo editável Div em cada tecla enter: Solução que eu acho é muito simples:

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

Este conteúdo innerHTML impede a criação de Nova Div no Div editável do conteúdo em cada chave de input.

A solução de comando inserHTML faz algumas coisas estranhas quando você inserHTML elementos contenteditable .

Eu tirei algumas idéias de várias respostas aqui, e isso parece se adequar às minhas necessidades por enquanto:

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

É possível evitar completamente esse comportamento.

Veja este violino

 $('
').appendTo('body').focus().remove();