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.

<adress> Adresse

CSS - Drehende E-Mail - Problem gelöst!

PHP - Tabellenzellen einfärben

JavaScript - Eine CSS-Klasse hinzufügen, wenn ein Bildlauf durchgeführt wird

MySQL - Löschen eines Datensatzes oder mehrere Datensätze

Plug-ins nötig
Man muss schon einen guten Grund haben, um ein Plug-ins (Browser-Erweiterung) zu rechtfertigen. Denn oft haben die Besucher das entsprechende Plug-in nicht und wollen es auch nicht runterladen, abgesehen davon, dass viele Besucher gar nicht wissen, was ein PlugIn ist. Wenn man trotzdem nicht auf Plug-in verzichten möchte, sollte man zumindest eine Alternative anbieten, sonst bekommen viele potenzielle Besucher die Seite nicht zu sehen.