Indstillingerne for adgangskodeafslørende input

Tidsstempel: 6. oktober 2021 kl. 10
Kildeknude: 1121033

I HTML er der en meget klar inputtype til håndtering af adgangskoder:

<input type="password">

Hvis du bruger det, får du de slørede punkttegn, når du skriver ind i det, som:

••••••••••••

Det er nettet, der prøver at hjælpe med sikkerheden. Hvis det ikke gjorde det, er det klassiske problem, at nogen kunne kigge over din skulder og udspionere det, du går ind i. Nemmere end at se på hvilke taster dine fingre trykker på, formoder jeg.

Men UX har udviklet sig lidt, og det er meget mere almindeligt at have en mulighed som:

☑️ Afsløre adgangskode?

Jeg tror, ​​tanken er, at vi skal have et valg. De fleste af os kan tage et hurtigt kig rundt og se, om der er nysgerrige øjne, og hvis ikke, kan vi vælge at afsløre vores adgangskode, så vi kan sikre, at vi skriver [e-mail beskyttet] korrekt og er ikke lavet til at lide smerten ved at skrive det forkert 8 gange.

Så! Hvad skal man gøre?

Mulighed 1: Brug type="password", så skift det ud med type="text" med JavaScript

Dette er, hvad alle gør lige nu, fordi det er den, der faktisk fungerer på tværs af alle browsere lige nu. 

const input = document.querySelector(".password-input"); // When an input is checked, or whatever...
if (input.getAttribute("type") === "password") { input.setAttribute("type", "text");
} else { input.setAttribute("type", "password");
}

Problemet her - udover at det bare er lidt underligt, at du skal ændre inputtyper kun for dette - er adgangskodehåndteringsværktøjer. Jeg ville ønske, jeg havde nøjagtige detaljer om dette, men det overrasker mig ikke, at rodet med inputtyper kan forvirre ethvert værktøj, der er specielt designet til at lede efter og forudfylde adgangskoder, måske endda værktøjerne, der er indbygget direkte i browserne selv.

Mulighed 2: Brug -webkit-text-security i CSS

Dette er ikke en reel mulighed, fordi du ikke bare kan få et samlet input til at fungere i nogle browsere og ikke i andre. Men der var tydeligvis et ønske om at flytte denne funktionalitet til CSS på et tidspunkt, da det virker i nogle browsere.

input[type="password"] { -webkit-text-security: square;
}
form.show-passwords input[type="password"] { -webkit-text-security: none;
}

Mulighed 3: input-security i CSS

Der er en Editor's Draft-specifikation for inputsikkerhed. Det er dybest set en skifteværdi.

form.show-passwords input[type="password"] { input-security: none;
}

Jeg kan lide det. Enkel. Men jeg tror ikke, at nogen browser understøtter det endnu. Så, lidt realistisk, sidder vi fast med mulighed #1 for nu.

Demoer, alle sammen

Kilde: https://css-tricks.com/the-options-for-password-revealing-inputs/

Tidsstempel:

Mere fra CSS-tricks