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">