Ich hoffe, dass das eines Tages Contao-intern verhindert wird. Aber solange habe ich mit meinem Freund Bing (Copilot) einen gut funktionierenden anderen Weg gefunden, der auch das Problem mit der Enter-Taste löst:
Du legst im Backend ein neues Template für form_submit.html an.
Du ersetzt den gesamten Code durch diesen:
PHP-Code:
<?php $this->extend('form_row'); ?>
<?php $this->block('field'); ?>
<?php if ($this->src): ?>
<input type="image" src="<?= $this->src ?>" id="ctrl_<?= $this->id ?>" class="submit<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" title="<?= Contao\StringUtil::specialchars($this->slabel) ?>" alt="<?= Contao\StringUtil::specialchars($this->slabel) ?>"<?= $this->getAttributes() ?>>
<?php else: ?>
<button type="submit" id="ctrl_<?= $this->id ?>" class="submit<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>"<?= $this->getAttributes() ?>>
<span id="submit-label"><?= $this->slabel ?></span>
<div id="loading-image" class="loadingio-spinner-rolling-dzm2p5wi9ut" style="display: none;"><div class="ldio-rt03pj2teaj">
<div></div>
</div></div>
<style type="text/css">
@keyframes ldio-rt03pj2teaj {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-rt03pj2teaj div {
position: absolute;
width: 51px;
height: 51px;
border: 15px solid #f9f9f9;
border-top-color: transparent;
border-radius: 50%;
}
.ldio-rt03pj2teaj div {
animation: ldio-rt03pj2teaj 1s linear infinite;
top: 50px;
left: 50px
}
.loadingio-spinner-rolling-dzm2p5wi9ut {
width: 20px;
height: 20px;
display: inline-block;
overflow: hidden;
background: none;
}
.ldio-rt03pj2teaj {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(0.2);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-rt03pj2teaj div { box-sizing: content-box; }
/* generated by https://loading.io/ */
</style>
</button>
<?php endif; ?>
<script>
jQuery(document).ready(function() {
jQuery("form").on("submit", function() {
jQuery("#submit-label").hide();
jQuery("#loading-image").css('display', 'inline-block'); // Setzt display auf inline-block
jQuery(this).find(':submit').prop('disabled', true);
});
});
</script>
<?php $this->endblock(); ?>
Der Code macht folgendes:
- Sobald das Formular losgeschickt wurde (egal ob per Klick oder Taste), wird das Absendefeld blockiert. Mehrfach klicken oder drücken hat somit keine Auswirkung mehr.
- Gleichzeitig wird der Text auf dem Button (bspw. "Absenden") ausgeblendet und gegen ein sich drehendes Warte-Icon ersetzt. Da es in CSS aufgebaut ist, muss kein GIF o.ä. geladen werden. Das signalisiert dem Nutzer, dass er nichts machen muss außer zu warten. Das ist wichtig, weil er sonst ungeduldig wird und die Zurück-Taste drückt, das Fenster schließt ...
Wie gesagt, bei uns funktioniert es sehr gut und wir haben endlich keine doppelten Einträge mehr.
@Contao: Bitte grundsätzlich implementieren