Evitar saltos de línea/párrafo en contentEditable

Question 1

Al usar contentEditable en Firefox, ¿hay alguna forma de evitar que el usuario inserte saltos de párrafo o de línea presionando Intro o Mayús+Intro?

Question 2

Puede adjuntar un controlador de eventos al evento keydown o keypress para el campo contentEditable y cancelar el evento si el código clave se identifica como enter (o shift+enter).

Esto deshabilitará enter/shift+enter completamente cuando el foco esté en el campo contentEditable.

Si usa jQuery, algo como:

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

… que devolverá falso y cancelará el evento de pulsación de tecla al entrar.

Question 3

Esto es posible con Vanilla JS, con el mismo esfuerzo:

document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});

No debe usar jQuery para las cosas más simples. Además, es posible que desee utilizar “clave” en lugar de “cuál”: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Actualización, desde keypress es obsoleto:

document.getElementById('idContentEditable').addEventListener('keydown', (evt) => {
    if (evt.keyCode === 13) {
        evt.preventDefault();
    }
});

Question 4

Agregue la siguiente regla CSS a esconder saltos de línea. Esta es solo una configuración de estilo, debe agregar algunos controladores de eventos a prevenir insertando saltos de línea:

.your_editable br {
    display: none
}

Question 5

Además de agregar saltos de línea, el navegador agrega etiquetas y estilos adicionales (cuando pega texto, el navegador también agrega su estilo de texto pegado).

El siguiente código lo cubre todo.

Cuando presione enter, no se agregarán saltos de línea.

Cuando pega texto, todos los elementos agregados por el navegador se eliminan del texto.

$('[contenteditable]').on('paste', function(e) {
    //strips elements added to the editable tag when pasting
    var $self = $(this);
    setTimeout(function() {$self.html($self.text());}, 0);
}).on('keypress', function(e) {
     //ignores enter key
     return e.which != 13;
});

Haga clic aquí para ver un ejemplo en vivo

Question 6

otra opción es permitir que se introduzcan pausas pero eliminarlas cuando se desenfoquen. esto tiene la ventaja de tratar con contenido pegado. sus usuarios lo amarán o lo odiarán (dependiendo de sus usuarios).

function handle_blur(evt){
  var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}

entonces, en html:

<span onblur="handle_blur(event)" contenteditable>editable text</span>

Question 7

Si está utilizando el marco JQuery, puede configurarlo con el en método que le permitirá tener el comportamiento deseado en todos los elementos, incluso si este se agregó recientemente.

$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});

Question 8

Agregar:

display: flex;

En el elemento html editable

¿Ha sido útil esta solución?