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 
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 ? `${count}/${maxLength}` : '';
 })
});
</
script>

<
textarea id="message" placeholder="Bitte etwas eintragen, max. 50 Zeichen" rows="4" cols="55">

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(divtxt);
 
  
//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 {
  
positionrelative;
  
width350px;
  
height100px;
}
 
/* 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 * {
  
width350px;
  
height100px;
  
positionabsolute;
  
top0;
  
left0;
  
backgroundtransparent;
}
 
/* Modify the counter div's font to show up in the middle
   and with bigger letters */
.charcounter div {
  
colorsilver;
  
font-familyArial;
  
font-size550%;
  
font-weightbold;
  
text-aligncenter;
  
line-height100px;
  
vertical-alignmiddle;
  
opacity0.3;
}
 
/* Finally, we want the counter to change color when it's negative */
.charcounter div.negative {
  
colorred;
}
</
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.

<tr> Tabellenzeile

CSS - Bild vergrößern mit dem „Checkbox Hack”

PHP - Dateiendung überprüfen

JavaScript - Alle Checkboxen auf einmal auswählen

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array