Avatar billede steen_hansen Forsker
06. december 2017 - 17:49 Der er 1 kommentar

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å?
Avatar billede showsource Seniormester
31. januar 2018 - 18:56 #1
Skud i tågen:
Giv dit input felt et id, og lav en funktion som gør hvad du ønsker ved onload

if(mitfelt = document.getElementById('feltid')) {
mitfelt.focus();
<!-- og whatever what -->
}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester