Eliminar espacios de un input en tiempo real

Eliminar espacios de un input en tiempo real en Javascript

Eliminar espacios de un input en tiempo real

Eliminar espacios de un input en tiempo real en Javascript

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 el ingreso de un nombre 

  • No debe permitir ingresar nombres con espacios en blanco.

¿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:

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

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

Pues bien ahora vamos a ver como va a ser la interacción 

$("#nombre").keyup(function(){              
        var ta      =   $("#nombre");
        letras      =   ta.val().replace(/ /g, "");
        ta.val(letras)
}); 

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.

Hasta un próximo tip de Javascript.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Eliminar espacios de un input en tiempo real?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 367 veces | Publicado hace 4 meses

Más códigos de programación en JAVASCRIPT.

Ver scripts de JAVASCRIPT

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en JAVASCRIPT

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019