Skip to main content
se añadieron 4 caracteres en el cuerpo
Origen Enlace

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+ {2,}/g, ' ');
});
<input type="text" id="m">

Con RxJS

const input = document.getElementById("m");

const kd = Rx.Observable
  .fromEvent(input, 'keydown')
  .do(event => 
    (event.keyCode || event.which) == 32 &&
    event.repeat && 
    event.preventDefault()
  );
  
const inp = Rx.Observable
  .fromEvent(input, 'input')
  .pluck('target', 'value')
  .map(text => text.replace(/\s+ {2,}/g, ' '))
  .do(value => input.value = value);
  
inp.subscribe();
kd.subscribe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
});
<input type="text" id="m">

Con RxJS

const input = document.getElementById("m");

const kd = Rx.Observable
  .fromEvent(input, 'keydown')
  .do(event => 
    (event.keyCode || event.which) == 32 &&
    event.repeat && 
    event.preventDefault()
  );
  
const inp = Rx.Observable
  .fromEvent(input, 'input')
  .pluck('target', 'value')
  .map(text => text.replace(/\s+/g, ' '))
  .do(value => input.value = value);
  
inp.subscribe();
kd.subscribe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/ {2,}/g, ' ');
});
<input type="text" id="m">

Con RxJS

const input = document.getElementById("m");

const kd = Rx.Observable
  .fromEvent(input, 'keydown')
  .do(event => 
    (event.keyCode || event.which) == 32 &&
    event.repeat && 
    event.preventDefault()
  );
  
const inp = Rx.Observable
  .fromEvent(input, 'input')
  .pluck('target', 'value')
  .map(text => text.replace(/ {2,}/g, ' '))
  .do(value => input.value = value);
  
inp.subscribe();
kd.subscribe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
<input type="text" id="m">

se añadieron 791 caracteres en el cuerpo
Origen Enlace

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
});
<input type="text" id="m">

Con RxJS

const input = document.getElementById("m");

const kd = Rx.Observable
  .fromEvent(input, 'keydown')
  .do(event => 
    (event.keyCode || event.which) == 32 &&
    event.repeat && 
    event.preventDefault()
  );
  
const inp = Rx.Observable
  .fromEvent(input, 'input')
  .pluck('target', 'value')
  .map(text => text.replace(/\s+/g, ' '))
  .do(value => input.value = value);
  
inp.subscribe();
kd.subscribe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
});
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");

// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
});
<input type="text" id="m">

Con RxJS

const input = document.getElementById("m");

const kd = Rx.Observable
  .fromEvent(input, 'keydown')
  .do(event => 
    (event.keyCode || event.which) == 32 &&
    event.repeat && 
    event.preventDefault()
  );
  
const inp = Rx.Observable
  .fromEvent(input, 'input')
  .pluck('target', 'value')
  .map(text => text.replace(/\s+/g, ' '))
  .do(value => input.value = value);
  
inp.subscribe();
kd.subscribe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
<input type="text" id="m">

se eliminaron 120 caracteres en el cuerpo
Origen Enlace

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos llamar alque se dispare el evento input en este caso particular)

window.addEventListener("DOMContentLoaded",f);

function f(){

 const input = document.getElementById("m");
  
// Útil para cuando se presiona la tecla 
 // espacio un período de tiempo
 // Capturamos la repetición y evitamos 
 // que se dispare el evento input
 input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
   if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
    return;
   }
 });
 
 // Evento input
 input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
 });
 
}
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos llamar al evento input en este caso particular)

window.addEventListener("DOMContentLoaded",f);

function f(){

 const input = document.getElementById("m");
 // Útil para cuando se presiona la tecla 
 // espacio un período de tiempo
 // Capturamos la repetición y evitamos 
 // que se dispare el evento input
 input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
   if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
    return;
   }
 });
 
 // Evento input
 input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
 });
 
}
<input type="text" id="m">

Para completar la respuesta de @x-rw, en base a lo que comenta @Mariano en sus comentarios, aporto mi granito de arena que creo que cubre todos los casos.

En realidad solo es necesario el evento input, pero hacemos una comprobación en el evento keydown para evitar la repetición de espacios cuando se deja presionado el botón de espacio. (Así evitamos que se dispare el evento input en este caso particular)

const input = document.getElementById("m");
 
// Útil para cuando se presiona la tecla 
// espacio un período de tiempo
// Capturamos la repetición y evitamos 
// que se dispare el evento input
input.addEventListener("keydown", ev => {
  var code = ev.keyCode || ev.which;
  if(code == 32 && ev.repeat){
    //console.log('repeat');
    ev.preventDefault();
  }
});

// Evento input
input.addEventListener('input', ev => {
  var text = input.value;
  //console.log(text);
  input.value = text.replace(/\s+/g, ' ');
});
<input type="text" id="m">

Origen Enlace
Loading