ubuntuusers.de

via DuckDuckGo

Dynamische Textinputs mit JQuery

Status: Ungelöst | Ubuntu-Version: Ubuntu 11.10 (Oneiric Ocelot)
Antworten |

TheIntruder

Avatar von TheIntruder

Anmeldungsdatum:
26. Juni 2011

Beiträge: 205
Zitieren
22. November 2011 20:05

Veruche einen Trick mit Textboxen / inputs zu emulieren, den ich bei Google gesehen habe:

1. Leer stehende Textinputs werden automatisch entfernt. 2. An erster Stelle ist immer eine leere Textbox / leerer Textinput 3. Wenn die erste Stelle beschrieben wurde, werden alle Textinputs / Textboxen nach unten geschoben und an erster Stelle eine neue Textbox / neuer Textinput erzeugt.

Dadurch brauche ich keine Add Taste.

Wie geht das mit JQuery?

noisefloor Team-Icon

Anmeldungsdatum:
6. Juni 2006

Beiträge: 29567
Zitieren
23. November 2011 12:39

Hallo,

unabhängig von jQuery sollte das so gehen, dass deine Originalseite eine Box einhält, an die du ein Eventhandler (onChange oder onFocus) bindest. Die an den Eventhandler gebundene Funktion fügt dann in den DOM-Tree vor die bestehende Box eine neue ein.

Gruß, noisefloor

dAnjou

Avatar von dAnjou

Anmeldungsdatum:
8. Oktober 2007

Beiträge: 872

Wohnort: Berlin
Zitieren
23. November 2011 16:34

Wie noisefloor es beschrieben hat, habe ich es mal umgesetzt. Verfeinerungen überlasse ich dir 😉

http://jsfiddle.net/AJH4p/11/

Und hier nochmal für's Archiv, falls es in dem Pastebin verloren geht: 

1
2
3
4
// .live() ist hier nötig, da nur so das Event Handling auf noch nicht existierende Elemente angewendet werden kann
$(".xxx").live("change", function() {
    $(this).before('<input class="xxx" type="text"/><br/>');
});

1
2
3
4
5
<html>
    <body>
        <input class="xxx" type="text"/><br/>
    </body>
</html>
Antworten |