Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Tekstområde (Textarea)

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group">
    <label class="form-label" for="input-area">
        Tekstområde med label
    </label>

    <textarea class="form-input "  rows="5"     id="input-area" name="input-area" ></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"
    id="input-area-character-limit">
    <label class="form-label" for="input-area-limit">
        Tekstområde med karakterbegrænsning
    </label>

    <textarea class="form-input "  rows="5"     id="input-area-limit" name="input-area-limit" aria-describedby="  input-area-character-limit-message" ></textarea>

    <span id="input-area-character-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 nedenstående:

new DKFDS.CharacterLimit(document.getElementById('FORM-LIMIT-ID')).init();

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