Textfeld erstellen

[blabla333]

<div class="textfelder">
<input type="text" id="input-1">
</div>

Ich möchte, dass ein neues Textfeld erstellt wird, sobald in das vorherige ein Text eingegeben wird. Wird der Inhalt gelöscht, dann wird das neue (ebenfalls leere) Textfeld auch gelöscht.
Mein Ansatz wäre dieser:

$("#input-1").keyup(function(){
    if($(this).val().length){
        // Neues Textfeld erstellen
    }
else {
// Erstelltes Textfeld wieder entfernen
}
});

Allerdings würde hier bei jedem Tastendruck ja ein neues Feld erstellt werden - was ja so keinen Sinn macht.

 

[Tronjer]

Anderes Event, blur würde sich eventuell anbieten.

 

[blabla333]

Stimmt, blur wäre am einfachsten, hat aber den Schönheitsfehler, dass der User erst das neue Feld sieht, wenn er das aktuelle Feld verlässt. In meinem Fall fände ich es schöner, wenn bei der Eingabe in das erste Textfeld schon das zweite Textfeld erstellt wird, so dass der User das bereits visuell sieht...

Meine Idee wäre folgende:
Wenn length von aktuellem Feld >1 ist, dann wird geprüft, ob alle Felder in diesem Div-Container Inhalt haben; wenn ja, dann wird ein leeres Feld angehängt (an letzter Stelle) und wenn nicht, heißt das, das bereits ein leeres Feld vorhanden ist. Besser wäre natürlich, wenn man explizit das letzte Feld überprüft.
Mit Blur kann ich dann prüfen, ob das aktuelle Textfeld doch keinen Inhalt hat (User hat die Eingabe doch gelöscht) und dann das neu erstellte leere Textfeld löschen

Oder ist das zu kompliziert gedacht?

 

[Tronjer]

Ist eigentlich ganz simpel:

<div id="foo">
  <input type="text">
</div>

$('body').on('keyup',' #foo input', function() {
  if ( $(this).val().length ) {
    if ( $(this).is('input:last') ) {
      $('#foo').append('<input type="text">')
    }
  } else {
    $(this).next('input').remove();
  }
});

 

[blabla333]

Noch eine letzte Frage zu diesem Thema:
Ist es möglich, dass man für dieses neue Textfeld wieder die gleiche Funktion erhält? Also so, dass bei Eingabe in das erste Textfeld ein zweites erstellt wird. Wird hier wieder etwas eingegeben, wird ein drittes erstellt usw..

 

[Tronjer]

Das sollte bei meinem Beispiel funktionieren. Aus eben diesem Grunde auch die Schreibweise:

$('body').on('keyup',' #foo input', function() {});

statt eines einfachen Eventhandlers. Bei näherer Betrachtung würde ich im else eventuell ein nextAll('input') verwenden, und natürlich könnte man der Sauberkeit halber auch dort noch eine if-Abfrage einbauen.