2

Quiero lograr, que teniendo un input, si al escribir más de un espacio, osea un espacio seguido de 1 o más espacios por ejemplo:

hola     como estas

Sólo puedo escribir 1, y para volver a escribir otro tenga que escribir cualquier caracter. He buscado pero solo he visto para java, python y .NET, esto intenté:

window.addEventListener("DOMContentLoaded",f);
function f(){
 const e = document.getElementById("m");
 e.addEventListener("keyup", f => {
 var patron = /\s{1,}/i; // tambien intenté con: /?=\s/ig
 if(patron.test(e.value)) {
 console.log(14)
 f.preventDefault(); 
 return false; 
 }
 });
}
<input type="text" id="m">

Me gustaría como se resuelve esto y explicado para entender.

4
  • A ver si entendi, quieres que solo se acepte 1 espacio entre palabras?
    – Einer
    Commented el 10 nov. 2017 a las 21:02
  • Sí einer, exactamente.
    – ESCM
    Commented el 10 nov. 2017 a las 21:05
  • / {2}/ coincide con 2 espacios consecutivos, pero el evento keyup no se dispara en todos los casos. ¿Qué hay de celulares o cuando el usuario copia y pega texto?
    – Mariano
    Commented el 10 nov. 2017 a las 21:09
  • Entonces, que debo realizar ?
    – ESCM
    Commented el 10 nov. 2017 a las 21:47

2 respuestas 2

2

La solucion que daria seria verificando la ultima tecla escrita, si la ultima tecla es espacio tendriamos que denegar la escritura al segundo espacio con event.preventDefault();

El siguiente ejemplo bloquea la escritura de 2 o mas espacios seguidos.

como obtengo la ultima tecla escrita en el input? voy añadiendo en un string las teclas escritas y entonces obtengo asi:

teclaAnterior = teclaAnterior + " " + event.keyCode;
var arregloTA = teclaAnterior.split(" ");
arregloTA[arregloTA.length - 2]

aqui el ejemplo completo:

document.getElementById("text").addEventListener("keydown", teclear);

var flag = false;
var teclaAnterior = "";

function teclear(event) {
  teclaAnterior = teclaAnterior + " " + event.keyCode;
  var arregloTA = teclaAnterior.split(" ");
  if (event.keyCode == 32 && arregloTA[arregloTA.length - 2] == 32) {
    event.preventDefault();
  }
}
<input type="text" id="text"></input>

2
  • ¿Y qué pasa si escribe un espacio, luego hace click en otro lugar del texto escrito y agrega otro espacio? ¿Y si copia y pega texto que incluye espacios consecutivos? ¿O si escribe desde un celular?
    – Mariano
    Commented el 11 nov. 2017 a las 5:05
  • 1
    @Mariano en ese caso mi respuesta estaria a medias, pero no del todo fallida Commented el 11 nov. 2017 a las 5:14
2

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

1
  • 1
    Exactamente. Algo así funciona y no es código antiguo que depende de una tecla... Detalle: vale aclarar que \s coincide con otros caracteres además de espacios, y sería / {2,}/g estrictamente para espacios.
    – Mariano
    Commented el 15 nov. 2017 a las 12:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.