Wie das Passwort und Vorlese JavaScript funktioniert
Dieses JavaScript kombiniert eine Vorlesefunktion, einen Passwortschutz und eine visuelle Unschärfe, um Inhalte erst nach erfolgreicher Eingabe freizuschalten. Der Artikel erklärt verständlich, wie die einzelnen Komponenten arbeiten.
Vorlesefunktion mit SpeechSynthesis
Der erste Teil des Skripts steuert die Vorlesefunktion. Über die Web‑API SpeechSynthesisUtterance wird der gesamte Text des Artikels ausgelesen und mit einer deutschen Stimme wiedergegeben. Die Funktion vorlesen() erzeugt ein neues Sprachobjekt, setzt Sprache und Geschwindigkeit und startet anschließend die Wiedergabe. Die Funktion stop() bricht die Ausgabe jederzeit ab.
Diese Technik ist vollständig im Browser integriert und benötigt keine externen Dienste.
Passwortschutz und Freischaltung
Der zweite Teil des Skripts überwacht das Passwortformular. Sobald der Nutzer das Formular absendet, wird das eingegebene Passwort mit einem vordefinierten Wert verglichen.
Stimmt es überein, wird der Artikel freigeschaltet: Die CSS‑Klasse password-blur wird entfernt und durch password-clear ersetzt. Dadurch verschwindet die Unschärfe, die Opazität steigt auf 100 % und der Inhalt wird wieder vollständig anklickbar.
Zusätzlich blendet das Skript die Passwortbox aus und erlaubt wieder das Markieren von Text.
Visuelle Effekte und Interaktionssperre
Der Blur‑Effekt sorgt dafür, dass der Artikel vor der Freischaltung nur verschwommen sichtbar ist. Gleichzeitig verhindert pointer-events: none, dass der Nutzer mit dem Inhalt interagieren kann.
Die Klasse no-select deaktiviert das Markieren von Text, was den Schutz zusätzlich verstärkt.
Auch der Rechtsklick wird blockiert, um das Kopieren oder Öffnen des Kontextmenüs zu verhindern. Diese Maßnahmen sind kein absoluter Sicherheitsmechanismus, aber sie erschweren den Zugriff auf geschützte Inhalte deutlich.