Textbereich bei Änderungserkennung

Wie erkenne ich Änderungsereignisse im Textbereich mithilfe von Javascript?
Ich versuche festzustellen, wie viele Zeichen während der Eingabe noch verfügbar sind.

Ich habe versucht, das Ereignis onchange zu verwenden, aber das scheint nur dann zu funktionieren, wenn der Fokus nicht mehr vorhanden ist.

Sie müssen onkeyup und onchange dafür verwenden. Der Onchange verhindert das Einfügen von Kontextmenüs, und der Onkeyup wird bei jedem Tastendruck ausgelöst.

Ein Codebeispiel finden Sie in meiner Antwort zum Auferlegen der maximalen Länge für textArea .

Es ist 2012, die Post-PC-Ära ist da und wir haben immer noch mit so etwas Grundlegendem zu kämpfen. Das sollte sehr einfach sein .

Bis sich dieser Traum erfüllt hat, ist dies der beste Weg, dies über einen Browser zu tun: Verwenden Sie eine Kombination aus inputund onpropertychangeEreignissen wie folgt:

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

Das inputEreignis kümmert sich um IE9 +, FF, Chrome, Opera und Safari und onpropertychangekümmert sich um IE8 (es funktioniert auch mit IE6 und 7, aber es gibt einige Fehler).

Der Vorteil von inputund onpropertychangebesteht darin, dass sie nicht unnötig ausgelöst werden (wie beim Drücken der Tasten Ctrloder Shift). so , wenn Sie ändern , um eine relativ teure Operation , wenn die Textarea Inhalte ausführen möchten, ist dies der Weg zu gehen .

Jetzt unterstützt IE dies wie immer nur halb: Es wird im IE weder ausgelöst inputnoch ausgelöst, onpropertychangewenn Zeichen aus dem Textbereich gelöscht werden . Wenn Sie also das Löschen von Zeichen im IE behandeln müssen, verwenden Sie keypress(im Gegensatz zur Verwendung von keyup/ keydown, da diese nur einmal ausgelöst werden, selbst wenn der Benutzer eine Taste drückt und gedrückt hält).

Quelle: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

BEARBEITEN: Es scheint, dass selbst die obige Lösung nicht perfekt ist, wie in den Kommentaren zu Recht ausgeführt: Das Vorhandensein der addEventListenerEigenschaft im Textbereich bedeutet nicht, dass Sie mit einem vernünftigen Browser arbeiten. in ähnlicher Weise das Vorhandensein der attachEventUnterkunft gibt es nicht bedeuten , IE. Wenn Sie möchten, dass Ihr Code wirklich luftdicht ist, sollten Sie dies ändern. Hinweise finden Sie in Tim Downs Kommentar .

• Für Google-Chrome ist eine Eingabe ausreichend (getestet unter Windows 7 mit Version 22.0.1229.94 m).
• Bei IE 9 erfasst oninput alles außer dem Schneiden über das Kontextmenü und die Rücktaste.
• Für IE 8 ist onpropertychange erforderlich, um zusätzlich zu oninput das Einfügen abzufangen.
• Für IE 9 + 8 ist onkeyup erforderlich, um die Rücktaste abzufangen.
• Für IE 9 + 8 ist onmousemove die einzige Möglichkeit, das Schneiden über das Kontextmenü zu erfassen

Nicht auf Firefox getestet.

    var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>

Ich weiß, dass dies nicht genau Ihre Frage ist, aber ich dachte, dass dies nützlich sein könnte. Für bestimmte Anwendungen ist es schön, dass die Änderungsfunktion nicht jedes Mal ausgelöst wird, wenn eine Taste gedrückt wird. Dies kann mit so etwas erreicht werden:

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

Dies funktioniert durch Testen, ob ein neueres Ereignis innerhalb einer bestimmten Verzögerungszeit ausgelöst wurde. Viel Glück!

Ich weiß, dass diese Frage spezifisch für JavaScript war. Es scheint jedoch keine gute und saubere Möglichkeit zu geben, IMMER zu erkennen, wenn sich ein Textbereich in allen aktuellen Browsern ändert. Ich habe erfahren, dass jquery sich für uns darum gekümmert hat. Es werden sogar kontextbezogene Menüänderungen an Textbereichen verarbeitet. Die gleiche Syntax wird unabhängig vom Eingabetyp verwendet.

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

oder

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

Sie können das Ereignis beim Ändern des Textbereichs anhören und die Änderungen nach Ihren Wünschen vornehmen. Hier ist ein Beispiel.

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()

<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>

Keyup sollte ausreichen, wenn es mit dem HTML5-Eingabevalidierungs- / Musterattribut gepaart ist. Erstellen Sie also ein Muster (Regex), um die Eingabe zu validieren und auf den Status .checkValidity () zu reagieren. So etwas wie unten könnte funktionieren. In Ihrem Fall möchten Sie, dass ein regulärer Ausdruck der Länge entspricht. Meine Lösung wird hier online verwendet / demonstriert .

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

Code, den ich für IE 11 ohne Abfrage und nur für einen einzelnen Textbereich verwendet habe:

Javascript:

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

und html:

<TEXTAREA onpropertychange='limit_char(5)' ...

Probier diese. Es ist einfach und seit 2016 ist es sicher für die meisten Browser geeignet.

<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> 
<div><span id="spn"></span> characters left</div>

function check(){
    var string = document.getElementById("url").value
    var left = 15 - string.length;
    document.getElementById("spn").innerHTML = left;
}

Das Beste, was Sie tun können, ist, eine Funktion festzulegen, die für einen bestimmten Zeitraum aufgerufen werden soll, und diese Funktion, um den Inhalt Ihres Textbereichs zu überprüfen.

self.setInterval('checkTextAreaValue()', 50);