JavaScript - Zeilen, Wörter und Zeichen in einem Textarea zählen
<script>
// Zeilen, Wörter und Zeichen in einem Textarea zählen
window.addEventListener("DOMContentLoaded", counter);
function counter() {
var str = document.getElementById("inhalt").value;
var zeilen = 0;
var pos = 0;
while (pos !== -1) {
zeilen++;
pos = str.indexOf("\n", pos + 1);
}
var w = str.trim();
var wort = w.split(" ");
document.getElementById("zeichen").innerText = "Zeilen: " + zeilen + " Wörter: " + wort.length + " Zeichen: " + str.length;
}
</script>
<span id="zeichen"></span><br>
<textarea id="inhalt" rows="7" cols="65" onInput="counter()">
Viel Text!
</textarea>
Siehe auch: Anzahl der Wörter als Fortschrittsbalken anzeigen,
Einfügemarke im Textarea bewegen und BBCode in einem Textarea einfügen
Farbiger Zähler
Bei diesem Textarea ist ein Zähler (Counter) eingebaut, der erst bei dem ersten Zeichen startet. Die "verbrauchten" Zeichen werden farblich dargestellt. Je nach Einstellung z.B. von 0 bis 3 in rot, von 4 bis 10 orange und ab 11 in grün.
<script>
window.addEventListener("DOMContentLoaded", function() {
const textarea = document.querySelector('#message')
const score = document.getElementById('score')
// Die max. Anzahl der Zeichen im Feld einstellen
const maxLength = 50;
textarea.setAttribute('maxlength', maxLength)
textarea.addEventListener('keyup', (e) => {
let count = e.target.value.length;
// Die Farbe und Änderungsgrenzen einstellen
let color = (count <= 4) ? 'red' : count > 10 ? 'green' : 'orange';
score.style.color = color;
score.innerText = count > 0 ? `${count}/${maxLength}` : '';
})
});
</script>
<textarea id="message" placeholder="Bitte etwas eintragen, max. 50 Zeichen" rows="4" cols="55"></textarea>
<div id="score"></div>Vielen Dank an: Andrzej Kossowski - kossowski.biz für dieses tolle Script.
Zähler hinter dem Eingabebereich
<script>
// We want this to run as soon as the page has loaded
window.onload = function() {
//Character limit
var limit = 50;
// the div to contain the background and the textarea
var div = document.createElement('div');
div.className = 'charcounter';
// Append the div into the document before the textarea, so that when we
// remove the textarea, it can be inserted inside the div and it'll look like it never moved.
var txt = document.getElementById('text');
txt.parentNode.insertBefore(div, txt);
//this will contain the background numbers
var counter = document.createElement('div');
div.appendChild(counter);
if (txt.value == "") {
txt.addEventListener('click', function() {
counter.innerHTML = limit;
});
}
// Add both keypress and keydown handlers to make sure the event always fires
txt.onkeyup = function() {
//Calculate how many chars the user has remaining
var len = limit - txt.value.length;
if(len < 0) {
counter.className = 'negative';
}
else {
counter.className = '';
}
counter.innerHTML = len;
};
txt.parentNode.removeChild(txt);
div.appendChild(txt);
}
</script>
<style>
/* The position of the parent is made relative so
that absolutely positioned elements take their location from this */
.charcounter {
position: relative;
width: 350px;
height: 100px;
}
/* Make both the counter div and the textarea inside the
div bigger and show up on top of each other by placing
them on top left corner with absolute positioning */
.charcounter * {
width: 350px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: transparent;
}
/* Modify the counter div's font to show up in the middle
and with bigger letters */
.charcounter div {
color: silver;
font-family: Arial;
font-size: 550%;
font-weight: bold;
text-align: center;
line-height: 100px;
vertical-align: middle;
opacity: 0.3;
}
/* Finally, we want the counter to change color when it's negative */
.charcounter div.negative {
color: red;
}
</style>
<textarea id="text"></textarea>
Gefunden auf: CodeUtopia
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<label> Etikett
CSS - Eingabefelder und Buttons formatieren
PHP - Abfrage einer Datenbank (über PDO) und Ausgabe der Daten