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
    stelle:nth-of-type(4) {
        letter-spacing: 1em;
    }

    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
        <input id="input1" />
        <script>
            input1.addEventListener("keyup", function () {
                this.value = this.value.replace(/ /g, '')
                    .replace(/[A-Z0-9]{4}/g, function (match) {
                        return match + ' ';
                    });
            });
        </script>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!