Lurkars/abi2007
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set autofocus

Browse Source
This commit is contained in:
Lurkars
2025-09-22 09:34:17 +02:00
parent 637f699aa4
commit 4ab7d114f7
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pom.xml
+1 -1
View File
@@ -4,7 +4,7 @@
<modelVersion>4.0.0</modelVersion> <modelVersion>4.0.0</modelVersion>
<groupId>de.champonthis</groupId> <groupId>de.champonthis</groupId>
<artifactId>abi</artifactId> <artifactId>abi</artifactId>
<version>0.2.5</version> <version>0.2.6</version>
<name>abi</name> <name>abi</name>
<parent> <parent>
src/main/resources/templates/index.html
+35 -20
View File
@@ -107,8 +107,7 @@
:class="{'disabled': working}">Suchen</button> :class="{'disabled': working}">Suchen</button>
</form> </form>
</div> </div>
<div id="stepMsg" class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" <div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
x-show="stepMsg"></div>
<div x-show="userName"> <div x-show="userName">
<form @submit.prevent="continueStep1"> <form @submit.prevent="continueStep1">
<p> <p>
@@ -134,7 +133,7 @@
<div id="step1ContinueDiv" class="d-flex gap-2 mt-3 justify-content-center" <div id="step1ContinueDiv" class="d-flex gap-2 mt-3 justify-content-center"
:class="userName ? '' : 'd-none'" x-transition> :class="userName ? '' : 'd-none'" x-transition>
<button id="step1ContinueBtn" type="submit" class="btn btn-primary flex-fill" <button id="step1ContinueBtn" type="submit" class="btn btn-primary flex-fill"
:class="{'disabled': working}" x-ref="continueBtn"> :class="{'disabled': working}" x-ref="continueBtn" autofocus>
Weiter <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" Weiter <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -154,13 +153,12 @@
<rect x="2" y="4" width="20" height="16" rx="2"></rect> <rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg> Schritt 2: Deine Kontaktdaten </svg> Schritt 2: Deine Kontaktdaten
</h2> </h2>
<div id="stepMsg" class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" <div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
x-show="stepMsg"></div>
<form @submit.prevent="submitContactData" class="mb-3" autocomplete="off"> <form @submit.prevent="submitContactData" class="mb-3" autocomplete="off">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">E-Mail:</label> <label class="form-label">E-Mail:</label>
<input type="email" x-model="email" placeholder="name@example.com" required <input id="step2InputEmail" type="email" x-model="email" placeholder="name@example.com"
autocomplete="off" class="form-control" autofocus /> required autocomplete="off" class="form-control" autofocus />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Handynummer (optional):</label> <label class="form-label">Handynummer (optional):</label>
@@ -202,8 +200,7 @@
:class="{'disabled': working}" autofocus>Suchen</button> :class="{'disabled': working}" autofocus>Suchen</button>
</div> </div>
</form> </form>
<div id="stepMsg" class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" <div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
x-show="stepMsg"></div>
<div id="knownContactDataDiv" x-show="showKnownContactData" x-transition> <div id="knownContactDataDiv" x-show="showKnownContactData" x-transition>
<form @submit.prevent="submitKnownContactData" class="mb-3"> <form @submit.prevent="submitKnownContactData" class="mb-3">
<div class="mb-3"> <div class="mb-3">
@@ -231,10 +228,11 @@
:class="{'disabled': working}" @click="setStep(2)"> :class="{'disabled': working}" @click="setStep(2)">
Zurück Zurück
</button> </button>
<button id="step3NextBtn" class="btn btn-primary flex-fill" :class="{'disabled': working}" <button id="step3ContinueBtn" class="btn btn-primary flex-fill"
@click="setStep(4)">Weiter <svg xmlns="http://www.w3.org/2000/svg" width="24" :class="{'disabled': working}" @click="setStep(4)">Weiter <svg
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path> <path d="m9 18 6-6-6-6"></path>
</svg></button> </svg></button>
</div> </div>
@@ -250,8 +248,7 @@
<line x1="3" y1="10" x2="21" y2="10"></line> <line x1="3" y1="10" x2="21" y2="10"></line>
</svg> Schritt 4: Bist du beim 20-Jahrestreffen am 13.11.2027 in Gevelsberg dabei? </svg> Schritt 4: Bist du beim 20-Jahrestreffen am 13.11.2027 in Gevelsberg dabei?
</h2> </h2>
<div id="stepMsg" class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" <div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
x-show="stepMsg"></div>
<p x-show="!stepMsg"> <p x-show="!stepMsg">
Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen in Gevelsberg dabei zu sein? Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen in Gevelsberg dabei zu sein?
Genauere Infos und Details gibt's dann später hier und per Mail. Genauere Infos und Details gibt's dann später hier und per Mail.
@@ -441,6 +438,12 @@
localStorage.setItem('darkMode', this.darkMode.toString()); localStorage.setItem('darkMode', this.darkMode.toString());
}, },
setStep(step) {
this.stepMsg = '';
this.stepMsgType = '';
this.step = step;
},
async findSelf() { async findSelf() {
this.stepMsg = ''; this.stepMsg = '';
this.stepMsgType = ''; this.stepMsgType = '';
@@ -469,11 +472,11 @@
this.stepMsgType = 'danger'; this.stepMsgType = 'danger';
} }
this.working = false; this.working = false;
}, if (this.userName) {
setStep(step) { setTimeout(() => {
this.stepMsg = ''; document.getElementById('step1ContinueBtn').focus();
this.stepMsgType = ''; }, 100);
this.step = step; }
}, },
async continueStep1() { async continueStep1() {
this.pendingUpdatedName = this.altNameChecked ? this.altName.trim() : null; this.pendingUpdatedName = this.altNameChecked ? this.altName.trim() : null;
@@ -490,8 +493,12 @@
} }
this.working = false; this.working = false;
} }
setTimeout(() => {
document.getElementById('step2InputEmail').focus();
}, 100);
this.setStep(2); this.setStep(2);
}, },
async submitContactData() { async submitContactData() {
this.stepMsg = ''; this.stepMsg = '';
this.stepMsgType = ''; this.stepMsgType = '';
@@ -517,7 +524,13 @@
this.stepMsgType = 'danger'; this.stepMsgType = 'danger';
} }
this.working = false; this.working = false;
setTimeout(() => {
document.getElementById('step3ContinueBtn').focus();
}, 100);
}, },
async findKnownContact() { async findKnownContact() {
this.stepMsg = ''; this.stepMsg = '';
this.stepMsgType = ''; this.stepMsgType = '';
@@ -561,6 +574,7 @@
} }
this.working = false; this.working = false;
}, },
async submitKnownContactData() { async submitKnownContactData() {
this.stepMsg = ''; this.stepMsg = '';
this.stepMsgType = ''; this.stepMsgType = '';
@@ -597,6 +611,7 @@
} }
this.working = false; this.working = false;
}, },
async submitCommit(committed) { async submitCommit(committed) {
this.working = true; this.working = true;
this.committed = committed; this.committed = committed;