<form> og <input> - JavaScript

JavaScript stepUp(), stepDown(), value, valueAsNumber, valueAsDate, submit(), reset(), validity, checkValidity(), setCustomValidity(), indeterminate

Introduktion

Her på siden kan du læse om hvordan du med JavaScript kan manipulere data i blandt andet <input type="number">, <input type="range"> og <input type="datetime">.

Med JavaScript kan du også teste om browseren understøtter en bestemt input type eller attribut.

Syntax

stepUp og stepDown 1

Her ses hvordan man kan bruger stepUp() og stepDown() til at ændre værdien i <input>.

Hvis der ikke angives nogen værdi i stepUp() og stepDown() er standard værdien 1.

stepUp() øger værdien med 1 * step (som er valgt i input elementet).
stepDown() mindsker værdien med 1 * step (som er valgt i input elementet).
Resultatet ovenfor er skabt af følgende kode

stepUp og stepDown 2




Resultatet ovenfor er skabt af følgende kode

stepUp og stepDown tid 1




Resultatet ovenfor er skabt af følgende kode

stepUp stepDown tid 2

Der findes 6 forskellige input typer til at angive tid.
stepUp() og stepDown() bruges til at øge/mindske værdien. Men hvor meget værdien øges/mindskes (sekunder) kommer an på input typen.





Resultatet ovenfor er skabt af følgende kode

value valueAsNumber valueAsDate

Her ses hvad value, valueAsNumber og valueAsDate returner for forskellige tids input typer.

value returner en streng.
valueAsNumber returner antal millisekunder siden Unix epoch UTC (1970-01-01T00:00Z).
valueAsDate returner et Date objekt.
4 : (original)
5 :
6 :
7 :
Resultatet ovenfor er skabt af følgende kode

type="date" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :

type="time" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :

type="datetime" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :

type="datetime-local" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :

type="month" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :

type="week" :
value :
valueAsNumber : millisekunder siden Unix epoch
valueAsDate (date objekt) :
Resultatet ovenfor er skabt af følgende kode

Test om browseren understøtter bestemte input typer og attributter

Hvis du vil kan du teste om browseren understøtter en bestemt input type eller attribut som her hvor browseren tester om den understøtter <input type="color"> og om den understøtter autofocus attributten i <input>.
Resultatet ovenfor er skabt af følgende kode

Ved at ændre koden lidt kan du teste for andre input typer og attributter.

validity og checkValidity()

validity er et object som bruges på <input>.
validity returner et "ValidityState" object.

checkValidity() er en method som bruges på <form>.
checkValidity() returner TRUE eller FALSE.

Resultatet ovenfor er skabt af følgende kode

validity og checkValidity() virker i Firefox 10.0.2, Opera 11.61, Safari 5.1.5, Chrome 16.
validity og checkValidity() virker IKKE i Internet Explorer 9.

Bemærk at hvis browseren understøtter checkValidity() men ikke input typen så kan checkValidity() returner TRUE hvis man har ugyldig data i en input type som browseren ikke forstår.
Jeg tror det er fordi browseren falder tilbage til <input type="text"> hvor alt er tilladt.
For eksempel i Firefox 10.0.2 der vil checkValidity() returner TRUE hvis man prøver at valider <input type="number" value="80" max="70"> (hvor værdien er for høj) fordi browseren ikke forstår "number" typen og derfor falder tilbage til "text" typen som ikke stiller krav til hvor høj værdien må være og derfor er den gyldig.

setCustomValidity

setCustomValidity() bruges til at skrive sin egen besked når browseren popper op med en besked om at brugeren har indtastet en ugyldig e-mail-adresse eller lignende og forsøger at sende formularen.
Beskeden kan også vises når man holder musen over feltet.
Resultatet ovenfor er skabt af følgende kode

indeterminate attribut

En checkboks har 2 indstillinger.
Ikke checket eller checket.
2 forskellige checkbokse

Der findes desuden et tredie udseende kaldet "indeterminate" hvilket betyder "ubestemt".
3 forskellige checkbokse indeterminate

Når indeterminate sættes får checkboksen et 3. udseende men checkboksen har stadig kun 2 mulige værdier.
Det er altså kun udseendemæssigt.

"indeterminate" kan bruges til en hovedcheckboks for at vises at undercheckboksene har forskellig værdi.
1 :
2 :
3 :
4 :
Resultatet ovenfor er skabt af følgende kode

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.