JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen


<script>

// Anzahl der Wörter als Fortschrittsbalken anzeigen

function words(ID) {
 var 
str event.target.value;
 var 
words str.split(" ");
 
document.getElementById(ID).value words.length;
 
document.getElementById(ID).innerText words.length '%';
}
</
script>

<
label>Fortschrittsbalken: <progress id="output1" value="0" max="100"></progress><br>
<
textarea onInput="words('output1')" cols="35" rows="10"></textarea>
</
label>

Beim HTML-Attribut: max="100" wird die maximale Länge des Fortschrittsbalkens angegeben.
Für jedes weitere Eingabefeld (Textarea) muss eine eigene ID (output1) verwendet werden.

Siehe auch: Zeilen, Wörter und Zeichen in einem Textarea zählen,
Einfügemarke im Textarea bewegen und BBCode in einem Textarea einfügen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<b> Hervorheben (Physische Auszeichnung)

CSS - Kompass-Animation

PHP - Text rückwärts ausgeben

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Die Differenz zweier Uhrzeiten ermitteln

Standardschriftarten benutzen
Setze nach Möglichkeit nur Standardschriftarten ein (Arial,Times New Roman, Verdana, Fixedsys, Courier, ...), denn bei einem Besucher, der deine Schriftart nicht installiert hat, wird automatisch eine Standardschriftart gewählt und so ändert sich eventuell das komplette Layout deiner Homepage.