Problemet med standard dato-placeholders

Når du udvikler webapplikationer, især dem der involverer brugerinput af datoer, støder du sandsynligvis på en begrænsning med standard HTML5-datoinputs. Selvom du kan angive en placeholder-tekst for andre inputfelter som tekst eller tal, fungerer dette ikke på samme måde for type="date" inputs. Standardvisningen er ofte 'mm/dd/yyyy', og selvom du forsøger at overskrive dette med en placeholder-attribut, forbliver den oprindelige visning uændret. Dette kan være frustrerende, især når du ønsker at guide brugeren med et specifikt forudvalgt datoformat eller en standardværdi, der ligner en placeholder.

Forestil dig et to-do liste webapp, hvor brugere kan redigere opgaver. Når en opgave vælges, åbnes en pop-up med et formular, der indeholder felter for opgavens navn, beskrivelse, projekt, prioritet og forfaldsdato. Mens de første fire felter nemt kan håndtere placeholders eller standardværdier, giver dato-inputfeltet kun den generiske 'mm/dd/yyyy' visning. Dette efterlader et behov for en mere intuitiv måde at vise en forventet dato på, før brugeren interagerer med feltet.

Forsøg på løsninger og deres begrænsninger

Der er forskellige metoder, man kan forsøge sig med for at omgå denne begrænsning. Lad os se på et par af de mest almindelige:

Løsning 1: CSS's ::before pseudo-element

En populær tilgang er at bruge CSS's ::before pseudo-element. Idéen er at indsætte en tekst, der fungerer som en placeholder, lige før standardvisningen af datoinputtet. Dette kan gøres ved at bruge content: attr(placeholder).

Her er et eksempel på, hvordan CSS'en kan se ud:

input[type="date"]::before { content: attr(placeholder); color: #aaa; margin-right: 0.5em; } input[type="date"]:focus::before, input[type="date"]:valid::before { content: ""; } 

Når inputfeltet er aktivt (fokuseret) eller har en gyldig dato, fjernes denne pseudo-placeholder. Selvom denne metode kan fungere i visse browsere, har den sine begrænsninger. For det første vises placeholderen stadig inden i selve inputfeltet, lige før den standard 'mm/dd/yyyy'. For det andet virker denne metode ikke konsekvent på tværs af alle browsere, og den understøttes f.eks. ikke i Firefox. Det vigtigste er, at den ikke giver den ønskede effekt af at erstatte den standard 'mm/dd/yyyy' med en brugerdefineret placeholder, men blot tilføjer en ekstra tekst foran.

Løsning 2: onfocus-attributten

En anden foreslået metode er at behandle datoinputtet som et almindeligt tekstinput i starten og derefter ændre dets type til 'date' når det får fokus. Dette kan opnås ved at bruge onfocus-attributten:

<input type="text" placeholder="Vælg en dato" onfocus="(this.type='date')"> 

Den oprindelige idé her er, at inputfeltet starter med en placeholder og den ønskede tekst. Når brugeren klikker på feltet, ændres typen til 'date', og den valgte placeholder vises. Desværre har denne metode vist sig at være upålidelig. I praksis kunne udviklere ofte ikke få dette til at fungere som forventet på tværs af forskellige browsere. Årsagerne hertil er ikke altid klare, men resultatet er, at den ønskede placeholder ofte ikke vises korrekt, eller at funktionen slet ikke aktiveres.

En fungerende alternativ løsning: Knap og Event Listener

Efter at have stødt på begrænsningerne ved de ovennævnte metoder, udviklede jeg en alternativ tilgang, der viser sig at være effektiv. Denne metode involverer at bruge en knap som en visuel placeholder og derefter erstatte den med et faktisk datoinputfelt, når knappen klikkes.

Implementering

Lad os se på koden bag denne løsning:

HTML

Vi starter med en knap, der indeholder den ønskede placeholder-tekst:

<button id="date-input-btn">01/01/2001</button> 

CSS

For at få knappen til at ligne et inputfelt, styler vi både knappen og det fremtidige datoinputfelt på samme måde. Det er vigtigt at matche udseendet så tæt som muligt for en glidende overgang.

#date-input-btn, #date-input { outline: none; border: none; font-family: Helvetica; font-size: 16px; border-radius: 4px; font-weight: 500; background-color: lightgray; color: gray; }

date-input-btn {

padding: 5px 6px; text-align: left; }

date-input {

padding: 4px 6px; }

Bemærk, at jeg har tilføjet en ekstra pixel til top- og bundpolstringen på knappen. Dette hjælper med at få knappen til at fremstå med samme højde som det datoinputfelt, den erstatter.

JavaScript

Nu kommer vi til JavaScript-delen, hvor vi håndterer interaktionen:

function switchToDateInput() { document.getElementById('date-input-btn').remove(); const dateInput = document.createElement('input'); dateInput.type = 'date'; dateInput.id = 'date-input'; document.body.appendChild(dateInput); } const dateInputBtn = document.getElementById('date-input-btn'); dateInputBtn.addEventListener('click', switchToDateInput); 

I JavaScript-koden definerer vi en funktion kaldet switchToDateInput. Denne funktion fjerner den oprindelige knap fra DOM'en og opretter et nyt inputelement af typen 'date'. Dette nye element får en ID, så det kan styles korrekt, og tilføjes derefter til DOM'en. Vi tilføjer også en event listener til den oprindelige knap, så funktionen switchToDateInput kaldes, når knappen klikkes.

Hvordan det virker

Denne metode skaber en illusion af, at knappen "forvandles" til et datoinputfelt. Knappen fungerer som den visuelle placeholder med den ønskede dato. Når brugeren klikker på knappen, fjernes den, og et ægte datoinputfelt vises i stedet. Ved at style knappen og inputfeltet ens, opnår vi en sømløs overgang, der giver brugeren en klar indikation af, hvad der forventes.

Fordele og ulemper

Fordele:

• Visuel klarhed: Giver en klar og brugerdefineret placeholder for datoinputs.
• Browserkompatibilitet: Fungerer på tværs af de fleste moderne browsere.
• Tilpasningsmuligheder: Giver fuld kontrol over udseendet af både placeholderen og det endelige inputfelt.

Ulemper:

• Dobbeltklik: Brugeren skal potentielt klikke to gange – én gang for at aktivere knappen og en gang til for at åbne dato-vælgeren. Dette skyldes, at den første klik udløser JavaScript, der erstatter knappen, og den efterfølgende interaktion (eller et nyt klik på det nu synlige inputfelt) er nødvendig for at vise selve dato-vælgeren.
• Mere kode: Kræver både HTML, CSS og JavaScript for at implementere.

Sammenligning af metoder

Her er en tabel, der opsummerer de forskellige metoder og deres egenskaber:

Ofte stillede spørgsmål

Kan jeg bruge en dato som standardværdi i stedet for en placeholder?

Ja, hvis du vil have en dato vist som standardværdi, der ikke forsvinder, når feltet fokuseres, kan du bruge value-attributten på datoinputtet. For eksempel: <input type="date" value="2023-10-27">. Bemærk, at datoformatet for value-attributten skal være 'YYYY-MM-DD'.

Hvorfor virker placeholder-attributten ikke på datoinputs?

HTML-standarden definerer ikke en placeholder-funktionalitet for type="date" inputfelter på samme måde som for tekstfelter. Dette skyldes sandsynligvis den måde, dato-inputs interagerer med brugeren (via en kalender-vælger) og den indbyggede struktur i browserens implementering af disse felter.

Er der en renere løsning end knap-metoden?

Mens knap-metoden er funktionel, kan den føles lidt som en "hack". Udviklere leder konstant efter mere elegante løsninger. Hvis du støder på en mere strømlinet metode, der opnår det samme resultat, er det altid værd at undersøge og potentielt implementere.

Konklusion

At give et datoinputfelt en brugerdefineret placeholder kan være en udfordring på grund af de begrænsninger, der findes i standard HTML. Mens CSS's ::before pseudo-element og onfocus-attributten har deres anvendelser, viser metoden med en knap, der erstattes af et datoinputfelt via JavaScript, sig at være en pålidelig og visuelt tiltalende løsning. Selvom den kræver lidt mere kode og en potentiel dobbeltklik-interaktion, giver den den nødvendige fleksibilitet til at forbedre brugeroplevelsen i dine webapplikationer. Fortsæt med at kode og eksperimentere for at finde de bedste løsninger for dine projekter!

Hvis du vil læse andre artikler, der ligner Placeholder for date inputs, kan du besøge kategorien Teknologi.