1
Je crée un formulaire dynamiquement avec JS simple. Chaque fois que le dernier champ d'entrée reçoit une entrée, il faut en créer une autre vide. D'un autre côté, le dernier champ doit être supprimé lorsque l'avant-dernier est également vide.L'événement est déclenché une seule fois lorsqu'il est appliqué à plusieurs éléments
HTML (avant d'entrée utilisateur):
<div id="eventList" class="gap">
<input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
</div>
Javascript (mis en œuvre par la suite, en extraits):
function addBox() {
var boxes = document.getElementsByClassName("eventBox");
var id = +getMaxID(boxes, "event") + +1; // ID of input being created
var list = document.getElementById("eventList");
list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function delBox() {
loadTexts(); // save current inputs
var list = document.getElementById("eventList");
document.getElementById("eventList").innerHTML = '';
var id = 1;
for (var i = 1; i < eventTexts.length; i++) {
if (eventTexts[i].length > 0) {
/* recreate box with its former input (if not empty) */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
id++;
}
}
/* add new last empty input */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function resizeEventList(e) {
if (typeof e != 'undefined') {
var boxes = document.getElementsByClassName("eventBox");
if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
/* input into last available box -> add an empty box */
loadTexts(); // save current inputs
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
addBox(); // add another box
writeTexts(); // write former inputs back into boxes
document.getElementById(senderID).focus(); // reset focus
} else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
/* box before last box empty -> delete last empty box */
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
delBox(); // delete all boxes and create X new boxes
document.getElementById(senderID).focus(); // reset focus
}
}
}
var eventTexts = new Array();
var senderID;
document.getElementById("event1").addEventListener("input", resizeEventList);
Le problème maintenant: Quand je demande tous les auditeurs de l'événement uniquement à l'entrée appelée " event1 ", le code fonctionne comme prévu - en ajoutant une entrée lors de la frappe, en supprimant un lorsqu'il est vide, juste pour event1 seulement. Lorsque j'applique également les écouteurs d'événements aux entrées créées dynamiquement (comme il se doit et est écrit dans le code ci-dessus), l'événement d'entrée n'est déclenché qu'une seule fois à la première entrée, y compris event1. Toutes les entrées suivantes ne sont plus enregistrées.
Est-ce que quelqu'un a une solution?
Merci, Jaspa
--- CODE COMPLET --------------------
<form id="planForm" class="top-margin" method="post" action="new.php?action=add">
<div>
<input class="text head bold" type="date" name="date" placeholder="Datum" value="<?php echo date("Y-m-d", time());?>" required /> <br>
<div id="eventList" class="gap">
<input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
</div>
</div >
<input type="button" value="Speichern" onclick="save();"/>
</form>
<script>
function getID(elm, type) {
if (typeof elm != 'undefined') {
return elm.id.replace(type, "");
} else {
return "";
}
}
function getMaxID(list, type) {
currID = 0;
max = 0;
if (list != null && list.length > 0 && type != null) {
for (var i=0; i < list.length; i++) {
currID = getID(list[i], type);
if (currID > max) {
max = currID;
}
}
}
return max;
}
function addBox() {
var boxes = document.getElementsByClassName("eventBox");
var id = +getMaxID(boxes, "event") + +1; // ID of input being created
var list = document.getElementById("eventList");
list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
console.log(document.getElementById("event" + id));
}
function delBox() {
loadTexts(); // save current inputs
var list = document.getElementById("eventList");
document.getElementById("eventList").innerHTML = '';
var id = 1;
for (var i = 1; i < eventTexts.length; i++) {
if (eventTexts[i].length > 0) {
/* recreate box with its former input (if not empty) */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
id++;
}
}
/* add new last empty input */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function resizeEventList(e) {
if (typeof e != 'undefined') {
var boxes = document.getElementsByClassName("eventBox");
if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
/* input into last available box -> add an empty box */
loadTexts(); // save current inputs
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
addBox(); // add another box
writeTexts(); // write former inputs back into boxes
document.getElementById(senderID).focus(); // reset focus
} else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
/* box before last box empty -> delete last empty box */
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
delBox(); // delete all boxes and create X new boxes
document.getElementById(senderID).focus(); // reset focus
}
}
}
function loadTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length; i++) {
eventTexts[getID(document.getElementById(boxes[i].id), "event")] = boxes[i].value;
}
}
function writeTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length-1; i++) {
document.getElementById(boxes[i].id).value = eventTexts[getID(boxes[i], "event")];
}
}
var eventTexts = new Array();
var senderID;
document.getElementById("event1").addEventListener("input", resizeEventList);
</script>
Avez-vous déconnecté que vous obtenez réellement l'élément sur la page avant d'ajouter l'écouteur? – mhatch
Oui, j'obtiens les ID corrects, mais seulement après la première entrée. D'autres entrées ne déclenchent pas du tout l'événement – Jaspa
avez-vous vu si cela renvoyait l'élément? document.getElementById ("event" + id) –