Eliminar espacios de un input en tiempo real

En ocasiones en una aplicación web se solicita que el usuario ingrese un texto a un campo o varios campos pero la principal particularidad es que solo queremos un string sin espacios, es decir solo una palabra y nada mas que eso para que sea almacenada o guardada en una Base de datos o cualquier otra forma de interacción. Entonces la finalidad de este tutorial es no permitir espacios en input javascript, es decir bloquear la escritura de espacios en blanco en el ingreso de texto a un input

Entonces vamos a ver como obtener en un input un texto limpio sin espacios en blanco , en tiempo real, es decir al instante.

Pasos para obtener un input sin espacios en HTML.

1. Crear un documento HTML
2. Agregar un formulario con un campo input de tipo texto
3. Indicar el atributo ID al campo de texto
4. Crear un función Javascript para analizar y evaluar el texto, quitanto los espacios en blanco para devolver finalmente solo un string sin espacios.

¿Cómo eliminar espacio en blanco en un input  html?

Para explicar adecuadamente esto, vamos a crear un formulario con un campo input al cual le asignaremos un id nombre. El código html se veria de la siguiente manera:

Crear un campo texto en un formulario HTML

y le agregamos el atributo id "_texto", esto permitirá a Javascript o Jquery identificar al campo que será objeto de ser evaluado y afectado,

<form>
<input type="text" name="nombre" id="_texto" placeholder="NOMBRE" class="form-control" autocomplete="off">
</form>

Como bien notan tiene varios atributos dentro de los cuales el mas importante es el ID

Quitar espacios del texto con la librería Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

La cual debe ir en el head del documento html. Pues bien ahora vamos a ver como va a ser la interacción 

$("#_texto").keyup(function(){
            let string = $("#_texto").val();
            $("#_texto").val(string.replace(/ /g, ""))
})

Y listo es toda la magia. Explicando un poco el código Javascript  con el evento keyUp

1. Cada vez que se ingrese un espacio en blanco en la caja del input text simplemente se eliminará
2. Porque es reemplado por la nueva cadena pero sin espacios.

Formas de quitar espacios con Javascript Vainilla

Con la función trim() , trimstart() y trimend()

• trim  elimina los espacios al inicio y fin de cada string 
• trimstart elimina los espacios al inicio del string
• trimend elimina los especios al final del string

Veamos un ejemplo con trim

_texto.addEventListener("keyup",e=>{    
            let string = e.target.value;    
            // trim() , trimEnd(), trimStart()            
            // e.target.value = string.trim();
            // e.target.value = string.trimEnd();
            e.target.value = string.trimStart();
})

Con la expresion regular (/ /g, "")

_texto.addEventListener("keyup",e=>{    
    let string = e.target.value;
   // expresion regular
   e.target.value = string.replace(/ /g, "")
})

Con la function split() y join()

_texto.addEventListener("keyup",e=>{    
   let string = e.target.value;
   // split() - join()
   e.target.value = string.split(" ").join("");
})

Concluyendo

Puedo decir que la manera más óptima es la segunda forma la que esta usando Javascripot puro, puesto que la primera forma usa Jquery y este puede ralentizar la velocidad por pedir la librería desde una CDN.

Hasta un próximo tip de Javascript.

Leido 26541 veces | 3 usuarios