Hvordan bygge en jQuery tekstboks med et vannmerke

Tekstbokser kan være svært viktig på en nettside som et middel til å legge inn informasjon inn i området. Som bruker jQuery kodespråket, kan du opprette et vannmerke tekstboks for området. Denne tekstboksen kan deretter vise vannmerket ord. Dette er nyttig for å forklare hva det er for, eller for å trekke oppmerksomhet til det, noe som sparer plass, eller bare gjøre nettstedet ditt ser mindre rotete. Du kan opprette denne jQuery effekt ved først å opprette tekstboksen i HTML-filen, og skaper en CSS-klasse for å style den vannmerketeksten og deretter bruke jQuery for å legge til vannmerke tekst til tekstboksen.

Bruksanvisning

1 Åpne HTML-fil på websiden der du vil at tekstboks med vannmerket. Finne sted i HTML-filen hvor du vil plassere tekstboksen skal vises, og klikk for å flytte markøren til det stedet.

2 Skriv inn følgende kode:

<Input type = "text" name = "navn" id = "idofthetextbox" value = "verdi" />

å lage tekstboksen. Change "Name" til navnet du ønsker å bruke for tekstboksen og endring "idofthetextbox" verdien til et unikt nummer som du ikke har brukt til noe annet inntastingsfelt ID på nettstedet. Erstatt "verdi" med en unik verdi for tekstfeltet. For eksempel, hvis du vil at besøkende til å legge inn en e-postadresse i en tekstboks, gi den verdien av "e-post".

3 Åpne style.css CSS-fil for området. Opprett en ny CSS-klasse ved å skrive:

.lightText {

color : #000000;

}

Bytt ut "# 000000" verdi med den heksadesimale verdien for fargen du vil at vannmerket teksten skal være.

4 Åpne HTML-fil på websiden igjen og skriv inn følgende kode etter tekstboksen kode:

<Script>
$ ( "# Name"). AddClass ( "lightText")

// set default value

.val ( "Name")

// onfocus action

.focus (funksjon () {

if($(this).val() == "Name"){
$(this).removeClass("lightText").val("Value");
}
// focus lost action

}). Uskarphet (function () {

if($(this).val() == "Value"){
$(this).val("Name").addClass("lightText");
}

});
</ Script>

Erstatt "Name" tekst med navnet på tekstboksen. Sett på "Value" tekst med verdien av tekstboksen.

5 Lagre alle filer og laste dem opp til nettstedet ditt, skrive de gamle.