Texto en el campo HTML para desaparecer al hacer clic?

Puedo crear fácilmente un campo de entrada html que ya tenga texto. Pero cuando el usuario hace clic en el campo de entrada, el texto no desaparece, sino que permanece allí. El usuario luego tiene que eliminar manualmente el texto para escribir. ¿Cómo puedo crear un campo de entrada donde cuando el usuario hace clic en el campo de entrada, el texto desaparece?Texto en el campo HTML para desaparecer al hacer clic?

Fuente

2009-10-26 HollerTrain

¿Qué tal algo así?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

Esto borrará tras enfocar la primera vez, pero luego no se borrará de enfoques posteriores después de que el usuario entra en su valor, cuando se deja en blanco se restaura el valor dado.

Fuente

2009-10-26 17:36:57 mecsco

Para lograr esto, puede utilizar los dos eventos onfocus y onBlur:

<input type="text" name="theName" value="DefaultValue" 
    onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}" 
    onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}" 
    style="color:#BBB;" />

Fuente

2009-10-26 17:53:11 BitDrink

y lo que si el usuario no entra en la vlue, tendrá que pasar valor en blanco o el valor defaul? mi caso de uso también es el mismo pero quiero que cuando el usuario no ingrese nada en blanco, el valor le asigne ¿cómo lo hacemos? ¿Cualquier sugerencia? Y no se usa el atributo placholder – mahesh

@mahesh. Lo que puede hacer es agregar una imagen de fondo con el texto deseado escrito en ella y agregar el detector de eventos ClickClick que hace que la imagen sea invisible. –

¡esta es una GRAN solución si aún tiene que soportar IE9! ¡Gracias! –

139

Lo que se quiere hacer es usar el HTML5 atributo placeholder que le permite establecer un valor predeterminado para el cuadro de entrada:

<input type="text" name="inputBox" placeholder="enter your text here">

Esto debería lograr lo que estás buscando. Sin embargo, tenga cuidado porque el atributo marcador de posición no es compatible con Internet Explorer 9 y versiones anteriores.

Fuente

2011-02-22 11:05:14 Nayish

HTML5 nos resuelve este problema con el atributo marcador de posición. No es necesario administrar los eventos de nuevo. Buena respuesta – Ron

atributo input placector no es compatible en IE9 e IE8 ... para obtener más información, vaya a http://caniuse.com –

¿Hay alguna manera de que el marcador de posición desaparezca cuando el usuario comienza a escribir, pero no desaparecerá cuando el campo esté 'centrado'? –

prueba esto.

<label for="user">user</label> 
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"  
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

Espero que esto ayude.

Fuente

2012-05-08 13:10:35

y ¿qué pasa si el usuario no ingresa el vlue, va a pasar el valor en blanco o el valor en incumplimiento? mi caso de uso también es el mismo pero quiero que cuando el usuario no ingrese nada en blanco, el valor le asigne ¿cómo lo hacemos? ¿Cualquier sugerencia? Y no hay uso del atributo placholder – mahesh

Esto es tan simple Creo que la solución que debe resolver todos sus problemas:

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

Ésta es su botón de envío:

<input type="submit" id= "submitBtn" value="Submit">

a continuación, poner este pequeño jQuery en un archivo JS:

//this will submit only if the value is not default 
$("#submitBtn").click(function() { 
    if ($("#valueText").val() === "ENTER VALUE") 
    { 
     alert("please insert a valid value"); 
     return false; 
    } 
}); 

//this will put default value if the field is empty 
$("#valueText").blur(function() { 
    if(this.value == ''){ 
     this.value = 'ENTER VALUE'; 
    } 
}); 

//this will empty the field is the value is the default one 
$("#valueText").focus(function() { 
    if (this.value == 'ENTER VALUE') { 
     this.value = ''; 
    } 
});

Y funciona también en los navegadores más antiguos. Además, se puede convertir fácilmente a javascript normal si es necesario.

Fuente

2013-07-11 08:48:27

Gracias funciona en IE9 que tenemos que admitir.Entonces no pude usar el marcador de posición. Para mantener la configuración del valor en el cuadro de texto en un solo lugar, utilicé jQuery para establecer el valor en el cuadro en documento listo. $ (document) ready (function() { \t/* conjunto de búsqueda de valor cuadro de entrada en carga del documento */ \t $ ('# valueText') Val ("Introducir valor");. } – atsurti

simple como esto: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">

Fuente

2013-09-03 10:27:44

Texto en el campo HTML para desaparecer al hacer clic?

Respuesta

Cuestiones relacionadas