Javascript auf Änderung braucht aktualisieren

Question

Ich versuche, ein Textfeld zu machen, mit einem Zähler, um zu zeigen, wie viele Zeichen Sie übrig haben (rein für die Benutzeroberfläche, nicht die tatsächliche Validierung).

Ich habe versucht, diesen Code zu verwenden:

function checkRemainingChars() { 

    var maxChars = 500; 
    var text = document.getElementById('textArea').value; 
    console.log(text); 
    var usedChars = text.length; 
    var remainingChars = maxChars - usedChars; 
    var message = "<p>" + remainingChars + "out of " + maxChars + " characters remaining </p>"; 
    console.log(message); 
    $('#remaining').append(message); 
} 


$(document).ready(function() { 

    $('#textArea').on('change',checkRemainingChars()); 

}); 

wo #textArea die Textbox, wo der Benutzer seinen Text legt, und #remaining ist nebenbei mit der Nachricht, wie viel Zeichen, die er noch hat.

Dies funktioniert nur, wenn die Seite geladen/aktualisiert wird. dann habe ich versucht, etwas einfach, hinzuzufügen, mögliche Fehler in meinem Code zu beseitigen:

$(document).ready(function() { 

    $('#textArea').on("change",alert(1)); 

}); 

aber auch hier nur ich die Benachrichtigung erhalten, wenn ich die Seite aktualisieren. Was muss ich tun, damit der Text aktualisiert wird, sobald der Benutzer etwas eingibt?

Answer 1

Sie rufen die Methode auf und weisen dem Ereignis-Listener zurück, was zurückgegeben wird, und weisen der Methode keinen Verweis zu.

$('#textArea').on('change',checkRemainingChars()); 
               ^^ 

Tropfen der ()

$('#textArea').on('change', checkRemainingChars); 

Wenn Sie die Methode ausgeführt werden, wenn die Seite geladen wird, können Sie das Änderungsereignis auslösen können.

$('#textArea').on('change', checkRemainingChars).trigger("change"); 

oder Sie können change direkt anrufen.

Und schließlich hängen Sie Nachrichten an das Element für das, was übrig ist. Ich glaube nicht, Sie anhängen wollen, werden Sie wahrscheinlich verwenden wollen, ist

$('#remaining').html(message); 

Answer 2

Das change Ereignis nur dann ausgelöst, wenn Sie die textarea verlassen, nachdem Sie seinen Inhalt verändert haben. Es ist wahrscheinlich sinnvoller, die keyup event zu verwenden.

$('#textArea').keyup(function(){ 
    var chars_remaining = 500 - $(this).text().length; 
    alert("remaingin chars: "+chars_remaining); 
}); 

Answer 3

Bitte lesen angebracht Schnipsel:

function checkRemainingChars() { 
 
    var maxChars = 500; 
 
    var text = $('#textArea').val(); 
 
    var usedChars = text.length; 
 
    var remainingChars = maxChars - usedChars; 
 
    var message = "<p>" + remainingChars + "out of " + maxChars + " characters remaining </p>"; 
 
    
 
    $('#remaining').html(''); 
 
    $('#remaining').html(message); 
 
} 
 

 
    $('#textArea').on('change keyup paste',checkRemainingChars);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="remaining"></div> 
 

 
<textarea id="textArea" rows="4" cols="50"> 
 
I'm trying to make a textbox, with a counter to show how many signs you have left (pure for user interface purposes, not the actual validation). 
 
</textarea>