javascript - reemplazar - salto de linea/n

Evite saltos de línea/párrafo en contenido Editable

Question

Al usar contentEditable en Firefox, ¿hay alguna forma de evitar que el usuario inserte un párrafo o saltos de línea presionando enter o shift + enter?

Answer 1

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

El código a continuación 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

Answer 2

Agregue la siguiente regla de CSS para ocultar saltos de línea. Esta es solo una configuración de estilo, debe agregar algunos controladores de eventos para evitar la inserción de saltos de línea:

.your_editable br {
    display: none
}

Answer 3

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

document.getElementById(''idContentEditable'').addEventListener(''keypress'', function(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 "que": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Answer 4

Otra opción es permitir el ingreso de pausas, pero eliminarlas en borrosidad. esto tiene la ventaja de tratar con contenido pegado. sus usuarios lo amarán u odiarán (dependiendo de sus usuarios).

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

luego, en html:

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

Answer 5

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 desactivará enter / shift + enter completamente cuando el foco esté en el campo contentEditable.

Si usas jQuery, algo así como:

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

... que devolverá falso y cancelar el evento de presionar tecla al entrar.

Answer 6

Si desea orientar todos los campos contentEditable use

$(''[contenteditable]'').keypress(function(e){ return e.which != 13; });

Answer 7

Si está utilizando JQuery framework, puede configurarlo con el método on que le permitirá tener el comportamiento deseado en todos los elementos, aunque este último se haya agregado recientemente.

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

Answer 8

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

La solución propuesta por Kamens no funciona en Opera; en su lugar, debería adjuntar evento al documento.

/**
 * Pass false to enable
 */
var disableEnterKey = function(){
    var disabled = false;

    // Keypress event doesn''t get fired when assigned to element in Opera
    $(document).keypress(function(e){
        if (disabled) return e.which != 13;
    });                 

    return function(flag){
        disabled = (flag !== undefined) ? flag : true;
    }
}();