Kode

Tekstområde (Textarea)

Tekstområde med label

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

Vis dette eksempel i et nyt vindue

<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();

Vælg et tema