Technologie

Wie kann ich verhindern, dass die Sudoku-Eingabe außerhalb des gültigen Bereichs erfolgt?

Melden
  1. Sudoku Eingabe validieren
  2. HTML-basierte Einschränkungen
  3. JavaScript-Validierung zur weiteren Absicherung
  4. Zusätzliche Maßnahmen und UX-Optimierung

Sudoku Eingabe validieren

Um sicherzustellen, dass die Sudoku-Eingabe nur Zahlen im gültigen Bereich von 1 bis 9 erlaubt, müssen Sie sowohl auf HTML- als auch auf JavaScript-Ebene entsprechende Einschränkungen vornehmen. Dadurch verhindern Sie, dass der Benutzer versehentlich oder absichtlich ungültige Werte eingibt.

HTML-basierte Einschränkungen

Sie können für jedes Eingabefeld einen Input vom Typ number verwenden und dann mit den Attributen min="1" und max="9" den erlaubten Zahlenbereich definieren. Das sorgt schon dafür, dass beispielsweise bei mobilen Geräten der Ziffernblock angezeigt wird und die Pfeile zum Hoch- und Runterscrollen nur Werte in diesem Bereich erzeugen können.

Ein Beispiel für ein Sudoku-Eingabefeld sieht so aus:

<input type="number" min="1" max="9" step="1" />

Das Attribut step="1" sorgt dafür, dass nur ganze Zahlen erlaubt sind.

JavaScript-Validierung zur weiteren Absicherung

HTML-Einschränkungen allein sind nicht immer ausreichend, da der Benutzer Eingaben auch manuell ändern oder per Browserkonsole manipulieren kann. Daher empfiehlt es sich, zusätzlich mit JavaScript zu überprüfen, ob die Eingaben gültig sind.

Ein gängiger Ansatz ist, auf das input- oder change-Event zu reagieren und die Eingabe zu kontrollieren. Falls die eingegebene Zahl außerhalb des Bereichs liegt oder keine Zahl ist, kann man die Eingabe automatisch zurücksetzen oder dem Benutzer eine Fehlermeldung anzeigen.

Zum Beispiel:

const input = document.querySelector(input);input.addEventListener(input, () => { const wert = input.value; if (wert === ) return; // Leer ist erlaubt (kein Wert gesetzt) const zahl = Number(wert); if (isNaN(zahl) || zahl < 1 || zahl > 9) { input.value = ; alert(Bitte geben Sie eine Zahl zwischen 1 und 9 ein.); }});

Zusätzliche Maßnahmen und UX-Optimierung

Um eine angenehme Benutzererfahrung zu gewährleisten, kann man auf die Verwendung von alert-Fenstern verzichten und stattdessen eine dezente Fehlermeldung unter dem Eingabefeld anzeigen. Auch ist es sinnvoll, die Eingabefelder so klein und übersichtlich zu gestalten, dass Fehler schnell ersichtlich werden.

Zusammengefasst verhindert die Kombination aus dem richtigen HTML-Markup mit min, max und step sowie einer JavaScript-Validierung, dass Benutzer ungültige Sudoku-Zahlen eingeben können. Damit stellen Sie sicher, dass im Sudoku nur Zahlen von 1 bis 9 eingegeben werden.

0

Kommentare