HTML/CSS Creazione di una casella di testo con testo in grigio e scompare quando faccio clic per inserire informazioni, come?

Question

Come si crea una casella di testo con un contenuto in grigio e quando si fa clic su di essa per immettere del testo, la parte in grigio scompare e consente di immettere il testo desiderato?

Esempio:

Una casella di testo "Nome". Le parole "Nome" sono all'interno della casella di testo in grigio, quando faccio clic, quelle parole scompaiono e scrivo il mio nome.

Answer 1

Questa risposta illustra un approccio pre-HTML5. Si prega di dare un'occhiata a Psytronic's answer per una soluzione moderna utilizzando l'attributo 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, Safari e IE10 supporta l'attributo HTML5 segnaposto

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

Al fine di ottenere una soluzione del browser più cross è necessario utilizzare alcuni javascript, ci sono un sacco di pre-made soluzioni là fuori, anche se non ne conosco nessuna in cima alla mia testa.

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

Answer 3

Con HTML5, è possibile farlo in modo nativo con:

Questo non è supportato con tutti i browser anche se (IE)

Questo può funzionare:

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

In caso contrario, se si sta utilizzando jQuery, è possibile utilizzare .focus e css per cambiare il colore.

Answer 4

Questa è una versione elaborata, per aiutarvi a capire

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; 
} 

Usa come questo:

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

Answer 5

È possibile utilizzare la soluzione di Floern. Potresti anche voler disabilitare l'input mentre imposti il ​​colore in grigio. http://www.w3schools.com/tags/att_input_disabled.asp

Answer 6

Il modo più breve è quello di aggiungere direttamente il codice seguente come attributi aggiuntivi nel tipo di input che si desidera modificare.

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

Nota: modificare il testo "Cerca" in "vai" o qualsiasi altro testo in base alle proprie esigenze.

Answer 7

Se ci si rivolge solo HTML5 è possibile utilizzare:

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

Per i browser non HTML5, vorrei sviluppare la risposta di Floern utilizzando jQuery e fare il javascript non invadente. Vorrei anche usare una classe per definire le proprietà sfocate.

$(document).ready(function() { 

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

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

}) 

Funzioni:

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

funziona:

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

Nota: Puoi modificare segnaposto, id e digitare valore su "email" o qualsiasi altra cosa sia adatta alle tue necessità.

Maggiori dettagli di W3Schools a: http://www.w3schools.com/tags/att_input_placeholder.asp

ma di gran lunga le migliori soluzioni sono da Floern e Vivek Mhatre (a cura di J0K)

Ho un frammento di codice di seguito, che è un tipico web pagina.

.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>