Is er een manier waarop ik een invoerwaarde in hoofdletters kan maken zonder de tijdelijke aanduiding in hoofdletters te maken?
Het lijkt erop dat ik de een of de ander krijg. Ik zou dit liever netjes doen door alleen CSS te gebruiken (JS laatste redmiddel).
Antwoord 1, autoriteit 100%
Elke browser-engine heeft een andere implementatie om de stijl van placeholder
te beheren. Gebruik het volgende:
input {
text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
text-transform: none;
}
::placeholder { /* Recent browsers */
text-transform: none;
}
Onnodig te zeggen dat dit alleen werkt in browsers die overweg kunnen met tijdelijke aanduidingen. (IE9/10+)
Antwoord 2, autoriteit 4%
Ik weet dat je zei dat het gebruik van JS een laatste redmiddel was, maar in dit geval is het waarschijnlijk effectiever en eenvoudiger (ook als je geen JS gebruikt, zal de waarde die wordt gepost op ‘submit’ niet in hoofdletters zijn), dus dit is misschien beter geen extra CSS nodig:
<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />