HTML5 DOM INPUT TEXT FEDARSVARVALUE EGENSKAP

Ofte må vi finne ut standardverdien til tekstfeltet. For å gjøre det brukes standardverdiegenskapen. StandardValue -egenskapen spesifiserer eller returnerer tekstfeltets standardverdi. I HTML er standardverdien spesifisert som "verdi" Egenskap.

Dette innlegget vil demonstrere:

• Hva er forskjellen mellom standardverdi- og verdiegenskaper?
• Hvordan vise standardverdien til inngangselementet?
• Hvordan vise gjeldende verdi av inngangsfeltet?

Hva er forskjellen mellom standardverdi- og verdiegenskaper?

“verdi”Og“standardverdi”Egenskaper er forskjellige på en slik måte at standardverdiegenskapen har standardverdien til inngangsfeltet. I kontrast har verdien egenskapen den nåværende verdien etter endringene.

Hvordan vise standardverdien for inngangselement i HTML?

For å vise standardverdien til inngangselementet, "standardverdi”Eiendom brukes i JavaScript. La oss sjekke ut at det fungerer ved hjelp av et eksempel.

Eksempel:
Først må du lage et divelement med klassenavnet "innhold”I HTML -filen. Legg til en annen div med klassenavnet “underinnhold”Inne i dette elementet. Inkluder deretter en bildetekst til tekstfeltet, og legg til et element tilknyttet attributtet “til”Å ha verdien”Navn”. Inne i dette etikettelementet, plasser inngangselementet som har attributter:

• type: Den spesifiserer inngangsfelttypen, for eksempel tekst, avkrysningsrute, radio eller mer.
• id: Den spesifiserer den unike ID -en som brukes i CSS eller JavaScript for manipulasjon.
• verdi: Den spesifiserer en verdi og knytter den til IDen til inngangsfeltet

Legg så til

element for å legge til innhold på websiden. Etter det, spesifiser et knappelement med attributtene “type”Med verdien”sende inn”Og“ved trykk”Attributt med verdien”ShowValue ()”. Denne funksjonen vil bli definert i JavaScript. Til slutt, for å se standardverdien, spesifiser en

element stylet som et inline-block-element. Spennelementet med ID “d_val”Viser standardverdien:

Navn:

Klikk her for å se verdiene

Klikk

Standardverdien:

Gå nå over til JavaScript -delen der en funksjon kommer til å bli definert som holder "standardverdi”Eiendom.

JavaScript

Funksjonsnavnet "ShowValue ()”Blir fulgt av nøkkelordet”funksjon”. Inne i denne funksjonen vil vi skrive en kodeblokk for å spesifisere oppgaven:

• var inputdefault: Lage en variabel “InputDefault”Bruke nøkkelordet”var”.
• dokument.getElementById (“Navn”).standardverdi: Tilordne standardverdien for inngangsfeltet ved å bruke "standardverdi”Eiendom til variabelen opprettet ovenfor.
• For å legge inn verdien av variabelen i HTML -spennelementet med ID D_Value, inkluderer koden "dokument.GetElementById (“D_Value”).indrehtml”. Tilordne deretter den variable verdien til den.

Den neste gitte delen vil demonstrere CSS -stylingen.

Stil “alle” elementer

*
Margin: 0;
polstring: 0;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

For å style alle HTML -elementer, bruk disse egenskapene:

• “margin”Eiendom gir plass rundt elementet.
• “polstring”Eiendom gir plass rundt elementets innhold eller inne i grensen.
• “Font-familie”Eiendom er satt med verdiene”Verdana, Genève, Tahoma, Sans-serif”. Denne listen er gitt for å sikre at hvis nettleseren ikke støtter den første verdien, vil en annen skrift blir brukt.

Stil “innhold” div

.innhold
Border: 1px Solid #F8C4C4;
Bredde: 400px;
polstring: 20px;
Margin: 40px auto;
Border-Radius: 12px;
Bakgrunnsfarge: Antiquewhite;

Div -elementet med klassen “innhold”Brukes med disse CSS -egenskapene:

• “grense”Eiendom brukes til å bruke en grense rundt elementet med grensebredden, grensestil og farge.
• “bredde”Eiendom setter elementets bredde.
• “Border-Radius”Eiendom vil gjøre elementets kanter rundt.
• “bakgrunnsfarge”Eiendom spesifiserer elementets bakgrunnsfarge.

Stil “subkontain” div

.underkonkurranse
Bredde: 500px;
Høyde: 150px;

Stil “input” element

.Underinnkallingsinngang
polstring: 3px;
Border-Radius: 5px;
Font-størrelse: 16px;

Inngangsfeltet er stylet med disse egenskapene:

• “skriftstørrelse”Eiendom brukes til innstilling av elementets skriftstørrelse.

Stil "knapp" -element

knapp
bakgrunnsfarge: brun;
polstring: 8px 20px;
Farge: #FFFFFF;
grense: 1px fast #ffd5d5;
Border-Radius: 6px;
Font-størrelse: 14px;
Margin: 5px 100px;
Bokseskygge: 1px 1px 2px 1px grå;

Knappelementet er stylet med følgende CSS -egenskaper:

• “farge”Eiendom setter elementets tekstfarge.
• “Bokseskygge”Eiendom er en kortvarig eiendom for å legge til en skygge rundt elementet. Den spesifiserer x-offset, y-offset, uskarphetsradius, spredt radius og farge på skyggen.

Style "-knappen" på svevet

Knapp: Hopp
Transform: Translatey (2px);
Markør: peker;

På Hover er knappelementene stylet med disse egenskapene:

• “forvandle”Eiendom brukes til elementets transformasjon. Verdien "Translatey (2px)”Flytter knappen på y-aksen.
• “markør”Eiendom med verdien”peker”Endrer musemarkøren til en hånd med en pekende finger.

Det kan observeres at inngangsverdien som er angitt i feltet er "John”, Mens standardverdien er“Tusenfryd”:

Hvordan vise gjeldende verdi av inngangsfeltet?

For å vise gjeldende/nåverdien av inngangsfeltet, gå først til HTML -filen. Legg til

element assosiert med stilattributtet med "vise”Eiendom med verdien”Input-block”. Deretter legger du til et spennelement spesifisert med "Val”Id:

Gjeldende verdi:

Etter det, legg til følgende kode i JavaScript:

var inputCurrent = dokument.getElementById ("Navn").verdi;
dokument.GetElementById ("Val").InnerHTML = inputCurrent;

• Først må du lage en variabel "InputCurrent”Med nøkkelordet”var”.
• For å lagre den eksisterende verdien av inngangsfeltet i variabelen, spesifiser “dokument.getElementById (“Navn”).verdi”. Her har verdien egenskapen den nåværende verdien av feltet.
• Å legge inn verdien i spennelementet som har ID “Val”I HTML, spesifiser funksjonen“dokument.getElementById (“Val”).indrehtml”. Deretter tilordne verdien av "InputCurrent”Variabel til det.

Som du ser, viser det første elementet standardverdien, mens det andre

Element viser gjeldende verdi:

Det handlet om standard og gjeldende inngangsfeltverdi.

Konklusjon

“standardverdi”Eiendom inneholder inngangsfeltets standardverdi. Denne egenskapen brukes til å angi eller returnere inngangsfeltets standardverdi. I HTML, “verdi”Eiendom setter en ny verdi som legges inn i feltet. Denne bloggen har forklart HTML5 DOM -inngangsteksten StandardValue og Value -egenskapen med passende eksempler.