変更時にJavaScriptがリフレッシュされる必要があります

Question

私はテキストボックスを作成しようとしています。

私はこのコードを使用してみました：#textAreaは、ユーザーが自分のテキストを入れ、#remainingは彼が残っているどのくらいの兆しメッセージを脇にあるテキストエリアで

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()); 

}); 

を。

これは、ページの読み込み/更新時にのみ機能します。その後、私は私のコードで可能なミスを排除するために、簡単な何かを追加しようとしました：

$(document).ready(function() { 

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

}); 

しかしここでも、私はページを更新するとき、私は唯一の警告を取得します。ユーザーが何かを入力するとすぐにテキストを更新するにはどうすればよいですか？

Answer 1

メソッドを呼び出して、そのメソッドへの参照を割り当てずに、イベントリスナーに返す内容を割り当てています。

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

あなたは、ページのロード時に実行する方法が必要な場合は、変更イベントをトリガすることができます()

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

をドロップします。

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

またはchangeに直接電話することができます。

最後に、残っている内容のメッセージを要素に追加します。私は、あなたはおそらく、あなたがtextareaを離れるときは、その内容を変更した後、

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

Answer 2

changeイベントがトリガさだけを使用したい、あなたが追加したいとは思いません。おそらくkeyup eventを使用すると便利です。

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

Answer 3

見添付スニペット持ってください：

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>