Para eliminar espacios en blanco debemos usar una expresión regular replace(/ /g, ""); capturamos el ID del input y luego la reemplazamos sin espacios.
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.
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:
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
<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
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();
})
_texto.addEventListener("keyup",e=>{
let string = e.target.value;
// expresion regular
e.target.value = string.replace(/ /g, "")
})
_texto.addEventListener("keyup",e=>{
let string = e.target.value;
// split() - join()
e.target.value = string.split(" ").join("");
})
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 21657 veces
Eliminar espacios de un input en tiempo real
Debe registrarse para descargar
Descargar Código Fuente© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023