入力時のJQueryのテキストエリアの文字数の問題

Question

form textareaにある文字カウント機能に問題があります。そこウェブ上で利用可能なソリューションのホストがあると私は文字の数は、ページ上の指定された領域に残さ出力はそれ以下に示す非常に便利なスニペットに遭遇しました：

var maxLength = 1000; 
jQuery('.your-enquiry').keyup(function() { 
    var length = jQuery(this).val().length; 
    var length = maxLength-length; 
    console.log(length + "characters remaining"); 
    jQuery('#counter').text(length); 
}); 

あなたはその私を見ることができます私の問題点を知るために、長さvariableをコンソールウィンドウに出力しています。私はキーの長さを解放するとすぐにXの値が割り当てられ、すぐに再び1000が割り当てられるようです。ここで

は私の出力の例である：私は私のコードの行542をチェックすると

995characters remaining (index):542 
1000characters remaining (index):542 

それは次のとおりです。

console.log(length + "characters remaining"); 

どのように長さが二倍たびに出力されて来ます！効果的に自分自身をリセットしますか？テキストエリアで間違ったタイプのイベントを使用していますか？理想的には、ユーザーが入力するようにリアルタイムでカウンタを更新したいと思います。それが役に立つかどう

いくつかのサイド情報...

私は、フォームを作成するContact Form 7 version 4.5.1を使用しています。私HTML出力は次のようになります。

<div> 
<span class="wpcf7-form-control-wrap your-enquiry"> 
<textarea name="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required your-enquiry" aria-required="true" aria-invalid="false"></textarea></span> 
    <p id="counter">1000</p> 
    </div> 

注：だけkeyUpイベントについての研究の迅速なビットを行なったし、どうやらそれはキーがリリースされるたびにトリガされます。どちらが理にかなっていますが、私の価値が2回出力されているので私を混乱させます。

Answer 1

微細加工：

// HTML 
<textarea class="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10"></textarea> 
<p id="counter">1000</p></div> 

// jQuery 
var maxLength = 1000; 
$('.your-enquiry').keyup(function() { 
    var length = jQuery(this).val().length; 
    var length = maxLength-length; 
    console.log(length + "characters remaining"); 
    jQuery('#counter').text(length); 
}); 

http://codepen.io/paulcredmond/pen/YpWRdY

Answer 2

$(document).ready(function() { 
 
    var text_max = 1000;  
 

 
    $('.your-enquiry').keyup(function() { 
 
     var text_length = $('.your-enquiry').val().length; 
 
     var text_remaining = text_max - text_length; 
 

 
     $('#textarea_feedback').html(text_remaining + ' characters remaining'); 
 
    }); 
 
});

html { margin:11px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<textarea class="your-enquiry" rows="8" cols="30" maxlength="99" ></textarea> 
 
<div id="textarea_feedback"></div>