Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tekstområde (Textarea)
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="form-group">
<label class="form-label" for="input-textarea">Tekstområde med label</label>
<textarea class="form-input" id="input-textarea" name="input-textarea" rows="5" required></textarea>
</div>
Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:
for
id
name
rows
Sæt højden på et tekstområde ved brug af rows
attributten. Sæt højden, så det svarer til den mængde tekst, der forventes indtastet.
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.
Når der vises en fejlmeddelelse, vis da også fejlopsummering.
Karakterbegrænsning
<div class="form-group form-limit" data-maxlength="60">
<label class="form-label" for="textarea-limit">Tekstområde med karakterbegrænsning</label>
<textarea class="form-input" id="textarea-limit" name="textarea-limit" rows="5" required aria-describedby="textarea-limit-limit-message"></textarea>
<span id="textarea-limit-limit-message" class="sr-only">Du kan indtaste op til 60
tegn</span>
<span class="form-hint character-limit" aria-hidden="true">Du har 60 tegn tilbage</span>
<span class="character-limit-sr-only sr-only" aria-live="polite">Du har 60 tegn
tilbage</span>
</div>
Husk at medtage de to beskeder skjult med klassen sr-only
. Disse anvendes af skærmlæsere til at give info og status på indtastningen til brugeren.
Javascript
Karakterbegrænsning kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med init()
.
Funktioner
Funktion | Beskrivelse |
---|---|
init() | Sørger for at beskederne med antal tegn tilbage opdateres. |
charactersLeft() | Returnerer det antal tegn, der lige nu kan indtastes i inputfeltet. Tallet er negativt, hvis antallet af tegn er overskredet. |
updateMessages() | Fremtvinger en opdatering af beskederne med antal tegn tilbage. Dette kan være nyttigt, hvis eksempelvis værdien i inputfeltet ændres programmatisk. |
Eksempel på anvendelse:
const form_limit = new DKFDS.CharacterLimit(document.getElementsByClassName('form-limit')[0]);
form_limit.init();
form_limit.charactersLeft();
Sprog
Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden til karakterbegrænsning, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag. Indholdet i krøllede parenteser {...}
nedenunder skal ikke oversættes eller ændres.
new DKFDS.CharacterLimit(document.getElementById('FORM-LIMIT-ID'), {
"character_remaining": "Du har {value} tegn tilbage",
"characters_remaining": "Du har {value} tegn tilbage",
"character_too_many": "Du har {value} tegn for meget",
"characters_too_many": "Du har {value} tegn for meget"
}).init();