[GELÖST] Input Automatisches Leerzeichen nach 4 Stellen

  • Hallo.

    Ich habe meinen Input:

    <input type="text" id="inputCoolerinput" size="40" maxlength="11" minlength="11" name="Coolerinput" placeholder="XXXX XXXXXX" class="form-control" required>

    Ich möchte, dass, sobald der User die ersten vier stellen gesetzt hat, automatisch ein Leerzeichen kommt.

    Also wenn ich z.B. jetzt "1234" eingebe, sofort ein Leerzeichen gemacht wird. Oder wenn ich jetzt "1234010203" eingebe, automatisch im Feld "1234 010203" steht.

    Wie löse ich das am Besten?

  • Mit Javascript auf Key Events reagieren bei dem Input Feld.

    Länge des Eintrags auslesen.

    Wenn 4 erreicht sind, leeres Feld hinzufügen

    JavaScript
    inp=document.getElementById('inputCoolerinput');
    inp.addEventListener('keydown',function(){
      if(inp.value.length==4){
        inp.value+=' ';
      }
    })

    Das sollte schon reichen

  • Wenn das beim Eingeben der Nummer sofort (auf input) passieren soll, ist das Stichwort hier: "Masked Input" und das ist eine Wissenschaft für sich.

    Dafür würde dir empfehlen eine Library wie https://imask.js.org/ zu verwenden.


    Wesentlich leichter ist es zu implementieren, dass die Nummer beim Verlassen (on blur) des Feldes formatiert wird.

    Dazu musst du on blur den Wert auslesen und durch den Wert mit Pause ersetzen.

    Sehr primitiv würde das so funktionieren:

    https://codepen.io/Mr_Beer/pen/dyOQRGJ?editors=1011



    basti1012 Deine Verstion hat ein Bug: Es ist nicht mehr möglich die ersten 4 Stellen mit der Backspacetaste zu löschen.

  • Sorry. Ich meine das was du mir da per codepen geschickt hast ;)

    Ich habe da den Code eingefügt, und jetzt wird das erste feld immer so formatiert. nicht das wo es gebraucht wird...

  • JavaScript
    const input = document.querySelector('input');

    Selektiert das erste Element von Typ <input>.

    Um das gewünschte Input zu selektieren kannst du zum Beispiel den Selektor "#inputAnmeldenummer" verwenden.

    Damit selektierst du das input mit der ID inputAnmeldenummer.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!