mit CSS3-Selector einzelne Stellen im Formularfeld ansprechen

  • Hallo Gemeinde,


    hat jemand eine Ahnung, ob es möglich ist, in einem Formularfeld einzelne Stellen (Buchstaben+Zahlen) per Selector anzusprechen? Mein Ziel ist es ein DIN 5008 konformes Formularfeld für die IBAN zu bauen:


    DE12 3456 7890 1234 5678 90


    Dazu will ich quasi hinter jeder vierten Stelle der Eingabe automatisch einen Abstand definieren.


    etwa so:

    Code
    1. stelle:nth-of-type(4) {
    2. letter-spacing: 1em;
    3. }

    Wie kann ich die Stellen in dem Feld ansprechen?

    Ist letter-spacing eigentlich eigentlich beidseitig oder nur auf den Platz nach dem betroffenen Element bezogen?

  • Mit CSS kann man nur Elemente ansprechen, aber keine einzelnen Zeichen in einem input-Feld. Mit Javascript ist es jedoch ziemlich einfach:

    Code
    1. <input id="input1" />
    2. <script>
    3. input1.addEventListener("keyup", function () {
    4. this.value = this.value.replace(/ /g, '')
    5. .replace(/[A-Z0-9]{4}/g, function (match) {
    6. return match + ' ';
    7. });
    8. });
    9. </script>