#360250: add pin element #104
Conversation
Sophiaw-hub
commented
Apr 15, 2024
•
Sophiaw-hub
commented
- Das Pin-Element befindet sich bereits in einem Formular und muss nicht extra in eins gezogen werden. Denn der Use Case benötigt in der Regel für die Pin-Eingabe nur das zugehörige Element und ggf. noch ein Textfeld.
- Bei der Eingabe werden nur Zahlen zugelassen.
- Es wird validiert, ob das Element befüllt ist.
- Über Style Configs kann eingestellt werden, ob das Formular automatisch abgeschickt werden soll.
- Über Style Configs kann eingestellt werden, ob die Pin-Elemente mit einer Nummer gelabelt werden sollen.
Sophiaw-hub
force-pushed
the
features/swl/pin-element
branch
from
b2eba80
to
7c350a2
Compare
Bumps [intl-tel-input](https://github.com/jackocnr/intl-tel-input) from 19.5.7 to 21.2.7. - [Release notes](https://github.com/jackocnr/intl-tel-input/releases) - [Changelog](https://github.com/jackocnr/intl-tel-input/blob/master/CHANGELOG.md) - [Commits](jackocnr/intl-tel-input@v19.5.7...v21.2.7) --- updated-dependencies: - dependency-name: intl-tel-input dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
| inputPin.setAttribute('inputmode', 'numeric'); | ||
| inputPin.setAttribute('pattern', "[0-9]"); | ||
|
|
||
| inputPin.addEventListener('focusin', (e) => { |
There was a problem hiding this comment.
Event Listener kannst du auch mit setAttribute('@focusin', 'myAlpineFunction') registrieren
There was a problem hiding this comment.
Ich bekomme das auf diesen Weg leider nicht hin. Generell, sobald ich versuche, die Methode auszulagern. Wird das Event nicht mehr erkannt.
| }, | ||
|
|
||
| _cleanUp() { | ||
| // TODO: auch im DOM lösbar? |
There was a problem hiding this comment.
Sehr gute Idee!
Wenn du nur Nummern willst: <input type="number">
Nur eine Zahl: <input min="0" max="9">
Min eine Zahl: <input required>
ich denke, das sollte das hier abdecken
There was a problem hiding this comment.
Das Einsetzten von größeren Zahlen als 9 konnte ich nicht über min/max verhindern. Aber das Einsetzen von Buchstaben. Dadurch ist _cleanUp() auf jeden Fall kürzer geworden.
There was a problem hiding this comment.
Das muss ich mir nochmal in Ruhe anschauen 😅
Sophiaw-hub
force-pushed
the
features/swl/pin-element
branch
from
1dc8df5
to
97ee5e9
Compare
