HTML/CSS Hacer un cuadro de texto con texto que está atenuado y desaparece cuando hago clic para ingresar información, ¿cómo?

Question

¿Cómo hago un cuadro de texto que tiene un contenido atenuado y cuando lo presiono para ingresar texto, la parte atenuada, desaparece y me permite ingresar el texto deseado?

Ejemplo:

Un cuadro de texto "Nombre". Las palabras "Nombre" están dentro del cuadro de texto atenuado, cuando hago clic, esas palabras desaparecen y escribo mi nombre en él.

Answer 1

Esta respuesta ilustra un enfoque pre-HTML5. Consulte Psytronic's answer para obtener una solución moderna con el atributo placeholder.

---

HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> 

JavaScript:

function inputFocus(i) { 
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } 
} 
function inputBlur(i) { 
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } 
} 

Answer 2

Chrome, Firefox y Safari IE10 soportan el atributo HTML5 marcador de posición

<input type="text" placeholder="First Name:" />

el fin de obtener una solución navegador más cruz que tendrá que usar algo de JavaScript, hay un montón de pre-hechos soluciones por ahí, aunque no sé ninguna de la parte superior de mi cabeza.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 3

Con HTML5, usted puede hacer esto de forma nativa con:

Esto no es compatible con todos los navegadores, aunque (IE)

Esto puede funcionar:

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null"> 

De lo contrario, si está utilizando jQuery, puede utilizar .focus y css para cambiar el color.

Answer 4

Ésta es una versión elaborada, para ayudarle a entender

function setVolatileBehavior(elem, onColor, offColor, promptText){ 
elem.addEventListener("change", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.addEventListener("blur", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.addEventListener("focus", function(){ 
    if (document.activeElement == elem && elem.value==promptText){ 
     elem.value=''; 
     elem.style.color = onColor; 
    } 
    else if (elem.value==''){ 
     elem.value=promptText; 
     elem.style.color = offColor; 
    } 
}); 
elem.value=promptText; 
elem.style.color=offColor; 
} 

uso como esto:

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name'); 

Answer 5

Usted puede utilizar la solución de Floern. Es posible que también desee deshabilitar la entrada mientras configura el color en gris. http://www.w3schools.com/tags/att_input_disabled.asp

Answer 6

La manera más corta es agregar directamente el siguiente código como atributos adicionales en el tipo de entrada que desea cambiar.

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'" 

Nota: Cambie el texto "Buscar" por "ir" o cualquier otro texto que se ajuste a sus necesidades.

Answer 7

Si usted está apuntando HTML5 sólo se puede utilizar:

<input type="text" id="firstname" placeholder="First Name:" /> 

Para los navegadores no HTML5, que se basaría en la respuesta de Floern utilizando jQuery y hacer que el código JavaScript no intrusiva. También usaría una clase para definir las propiedades borrosas.

$(document).ready(function() { 

    //Set the initial blur (unless its highlighted by default) 
    inputBlur($('#Comments')); 

    $('#Comments').blur(function() { 
     inputBlur(this); 
    }); 
    $('#Comments').focus(function() { 
     inputFocus(this); 
    }); 

}) 

Funciones:

function inputFocus(i) { 
    if (i.value == i.defaultValue) { 
     i.value = ""; 
     $(i).removeClass("blurredDefaultText"); 
    } 
} 
function inputBlur(i) { 
    if (i.value == "" || i.value == i.defaultValue) { 
     i.value = i.defaultValue; 
     $(i).addClass("blurredDefaultText"); 
    } 
} 

CSS:

.blurredDefaultText { 
    color:#888 !important; 
} 

Answer 8

funciona esto:

<input type="text" id="firstname" placeholder="First Name" /> 

Nota: Puede cambiar el marcador de posición, el id y el tipo de valor a "correo electrónico" o lo que sea que se ajuste a sus necesidades.

Más detalles por W3Schools en: http://www.w3schools.com/tags/att_input_placeholder.asp

pero con mucho, las mejores soluciones son por Floern y Vivek Mhatre (editado por J0K)

Tengo un fragmento de código a continuación, es una red típica página.

.Submit { 
 
    background-color: #008CBA; 
 
    border: 3px; 
 
    color: white; 
 
    padding: 8px 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 
div { 
 
    background-color: yellow; 
 
    }

<div> 
 
    <center> 
 
    <p>Some functions may not work, such as the css ect. 
 
    <p>First Name:<input type="text" id="firstname" placeholder="John" /> 
 
    <p>Surname:<input type="text" id="surname" placeholder="Doe" /> 
 
    <p>Email:<input type="email" id="email" placeholder="john.doe@example.com" /> 
 
    <p>Password:<input type="email" id="email" placeholder="john.doe@example.com" /> 
 
    <br /><button class="submit">Submit</button>     </center> 
 
</div>