jQueryでテキストエリアの文字数カウントが上手くいきません

jQueryを使ってテキストエリアに入力した文字のカウントダウンを行う処理をしているのですが、何故か目標のテキストエリアとは別にもう一つあるテキストエリアの文字列をカウントしてしまいます。

lang
1<textarea name="description" class="form-control col-sm-7" rows="2" id="description"></textarea>
2
3<span class="count help-block text-right"></span>
4
5<textarea name="contents" class="form-control col-sm-7" rows="10" id="contents"></textarea>

lang
1<!--http://black-flag.net/jquery/20120229-3696.html-->
2<script src="http://code.jquery.com/jquery.min.js"></script>
3<script type="text/javascript">
4$(function(){
5    var countMax = 50000;
6    $('#contents').bind('keypress change',function(){
7        var thisValueLength = $(this).val().length;
8        var countDown = (countMax)-(thisValueLength);
9        $('.count').html(countDown);
10
11        if(countDown < 0){
12            $('.count').css({color:'#ff0000',fontWeight:'bold'});
13        } else {
14            $('.count').css({color:'#000000',fontWeight:'normal'});
15        }
16    });
17    $(window).load(function(){
18        $('.count').html(countMax);
19    });
20});
21</script>
22

上記のコードのうち、id="contents"のテキストエリアに入力された文字数のカウントダウンを<span class="count help-block text-right"></span>で表示するようにしているのですが、スマートフォンから実行した時に限り、id="description"のテキストエリアに文字を入力するとその文字数カウントが反映されてしまいます。

その後contentsのテキストエリアで文字を入力し始めたらその文字数がカウントされるのですが、その後更にdescriptionのテキストエリアで入力するとまたdescriptionの文字数がカウントされてしまいます。

スマートフォンからもcontentsのテキストエリアの文字数だけをカウントするにはどうしたらいいのでしょうか？

追記：上記のコードでは問題が再現されないようなので、実際に問題が発生しているページのurlを記載します。
http://privatter.net/post/ です
（Twitterアカウントを使用したログインが必要になっております）

行動規範の内容に同意します

回答2件

おそらく $('#contents').bind の bind が良くないのだと思います。
$('#contents').on にしてみるといいかもしれません。

投稿2015/06/27 14:34

編集2015/06/27 14:38

takutok

総合スコア392

ベストアンサー

こんにちは。

解決策にはなっていないのですが、いちおう検証してみたので、回答します。

問題になっている不具合を再現しようと思いまして、ご質問にあるJavascriptと
HTMLとを組みあわせて、以下のようなHTMLファイル q11888.html を作成
しました。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Q11888</title>
6<script src="http://code.jquery.com/jquery.min.js"></script>
7<script type="text/javascript">
8$(function(){
9    var countMax = 50000;
10    $('#contents').bind('keypress change',function(){
11        var thisValueLength = $(this).val().length;
12        var countDown = (countMax)-(thisValueLength);
13        $('.count').html(countDown);
14
15        if(countDown < 0){
16            $('.count').css({color:'#ff0000',fontWeight:'bold'});
17        } else {
18            $('.count').css({color:'#000000',fontWeight:'normal'});
19        }
20    });
21    $(window).load(function(){
22        $('.count').html(countMax);
23    });
24});
25</script>
26</head>
27<body>
28<textarea name="description" class="form-control col-sm-7" rows="2" id="description"></textarea>
29
30<span class="count help-block text-right"></span>
31
32<textarea name="contents" class="form-control col-sm-7" rows="10" id="contents"></textarea>
33</body>
34</html>