[GELÖST] Input Automatisches Leerzeichen nach 4 Stellen

rakete

Hallo.

Ich habe meinen Input:

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?

basti1012

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

AndreasB

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.

rakete

Hallo. Das würde so passen. Leider funktioniert es nicht ganz wie gewünscht:

[Blockierte Grafik: https://i.ibb.co/F7jLNg8/Bildschirmfoto-2021-03-12-um-13-06-58.png]

Wie kann ich das lösen? Kenn mich mit Javascript wirklich null komma null aus....

...die ID und der Name des Feldes sind "anmeldenummer" - ich brauche das also wirklich nur auf ein Feld (das Anmeldenummer-Feld)

danke

AndreasB

Welche Lösung meinst du jetzt und was funktioniert daran nicht?

rakete

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...

AndreasB

zeige mal deinen Code. Das hört sich danach an, dass der Selektor in JS das Falsche Element Selektiert.

rakete

Code

<form action="?register=1" method="post">

<div class="form-group">
<label for="inputVorname">Vorname:</label>
<input type="text" id="inputVorname" size="40" maxlength="250" name="vorname" class="form-control" required>
</div>

<div class="form-group">
<label for="inputNachname">Nachname:</label>
<input type="text" id="inputNachname" size="40" maxlength="250" name="nachname" class="form-control" required>
</div>

<div class="form-group">
<label for="inputAnmeldenummer">Bereits zugeteilte Anmeldenummer:</label>
<input type="text" id="inputAnmeldenummer" size="40" maxlength="11" minlength="11" name="anmeldenummer" placeholder="XXXX DDMMYY" class="form-control" required>
<script>
const input = document.querySelector('input');

input.addEventListener('blur', (evt) => {
   const text = input.value;

   if (text[4] === ' ') {
      return;
   }

   input.value = `${text.slice(0, 4)} ${text.slice(4)}`;
})
</script>
</div>

<div class="form-group">
<label for="inputGeb">Geburtsdatum:</label>
<input type="date" id="inputGeb" size="40" name="gebdatum"  class="form-control" placeholder="YYYY-MM-DD" 
       pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" 
       title="Geburtsdatum im folgenden Format eingeben: YYYY-MM-DD" required>
</div>

<div class="form-group">
<label for="inputPasswort">Dein Passwort:</label>
<input type="password" id="inputPasswort" size="40"  maxlength="250" minlength="6" name="passwort" class="form-control" required>
</div> 

<div class="form-group">
<label for="inputPasswort2">Passwort wiederholen:</label>
<input type="password" id="inputPasswort2" size="40" maxlength="250" minlength="6" name="passwort2" class="form-control" required>
</div> 
<button type="submit" class="btn btn-lg btn-primary btn-block">Registrieren</button>
</form>

Alles anzeigen

AndreasB

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.

rakete

Danke. Funktioniert

Jetzt mitmachen!