> Faqs > Mostrar un valor predeterminado en un campo input y al comenzar a escribir que se borre ese valor

Mostrar un valor predeterminado en un campo input y al comenzar a escribir que se borre ese valor

Buenas tardes, estoy comenzando a programar en HTML, tengo la siguiente duda:

Quiero hacer una pantalla de inicio de sesión como la de ustedes, ósea en el siguiente campo me aparezca nombre de usuario por defecto, al comenzar a escribir este valor se borre y al estar vacío coloque el valor por defecto de nuevo.

<input type="text" name="nombre" value="Nombre de Usuario"class="form-input" required/>

De antemano muchas gracias

Respuestas

Me da la sensación de que lo que quieres hacer es usar un "placeholder". O sea, no sé en realidad cuál es el objetivo que quieres con ese usuario predeterminado, pero si solamente es orientar al usuario sobre lo que tiene que escribir en el campo, podrías hacer algo como esto:

<input type="text" name="nombre" value="Nombre de Usuario" class="form-input" placeholder="Escribe tu usuario" required/>

A todas luces, por tu código, creo que es un placeholder lo que querías usar... pero si no es esto lo que quieres, entonces lo que necesitas es usar Javascript. Primero con HTML le indicas un value al campo de usuario:

<input id="user" type="text" name="nombre" class="form-input" placeholder="Escribe tu usuario" value="pepeuser" required/>

Luego tienes que asociar un par de manejadores de evento al campo input. para los eventos "focus" y "blur"

document.getElementById('user').addEventListener('focus', function() {
  if(this.value == 'pepeuser') {
    this.value = '';
  }
});

document.getElementById('user').addEventListener('blur', function() {
  if(this.value == '') {
    this.value = 'pepeuser';
  }
});
Santiago
300 10 23 10