CSS: Fokus på <input type="text" placeholder="Dit brugernavn">
I stedet for at benytte<body onload="document.frmLogin.username.focus();">
<form name="frmLogin">
Brugernavn:<br>
<input type="text" name="username" tabindex="1">
</form>
</body>
- vil jeg have "Brugernavn" ind i tekstfeltet v.hj.a. placeholder, så det kommer til at se således ud (jeg fjerner 'Brugernavn')
<body onload="document.frmLogin.username.focus();">
<form name="frmLogin">
<input type="text" name="username" placeholder="Dit brugernavn">
</form>
</body>
For at både kunne bibeholde placeholder og fokus på "username", fandt jeg dette CSS:
.placeholder-fix:focus::-webkit-input-placeholder {
color: transparent;
}
.placeholder-fix:focus::-moz-placeholder {
color: transparent;
}
Det gør, at cursor har fokus i "username" samtidigt med, at der står "Dit brugernavn".
Ved indtastning af den første karakter, forsvinder "Dit brugernavn" fra tekstfeltet, og bliver erstattet af den første karakter man indtaster. Og det er også meningen:
1: Jeg får fjernet 'Brugernavn<br>' (forenklet HTML), og får sat 'Dit brugernavn' ind i tekstfeltet v.hj.a. placeholder.
2. Formularfeltet "username" har fokus (betyder noget for brugervenligheden)
3:. Ved første tryk på tastaturet forsvinder "Dit brugernavn" fra tekstfetet og bliver erstattet af karakteren fra det første tastetryk
Det fungerer fint i FireFox og Google Chrome. Men ikke i MSIE v11.
Jeg har fundet adskillige emner om det, men har ikke fundet noget, der kan løse problematikken mht. Internet Explorer v11. F.eks.
:-ms-input-placeholder {
opacity: 1;
-ms-transition: opacity .5s;
transition: opacity .5s;
}
Jeg har forsøgt mig med flere JQuery.js osv. Men intet virker, jeg kan bare ikke få MSIE til at opføre sig på denne måde. Håber I kan hjælpe.
Spørgsmål 1: Hvordan får man det til at virke i MSIE?
Spørgsmål 2: Er der andre browsere det burde virke i også?
