jquery文字数カウント (指定文字以上)

最低でも、30文字以上いれてくれよなっ！
ということをする。


参考
https://qiita.com/koba0124/items/f18bda8d9b8d153ba635


ということで早速コード。


# これで 30文字以上でないと赤くエラーが表示される

```

<script>

    $(function () {


        function setCount(obj,max){
            //カウント表示用エリアを付与
            var count_area = $('<p class="count">0/' + max + '</p>').insertAfter($(obj));

            //イベント設定
            $(obj).bind("keyup",function(){
                //文字数取得
                var count = $(obj).val().replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,'').length;

                //文字数反映
                count_area.text( count + '/' + max );

                //最大数チェック
                if(count < max){
                    count_area.css('color','red');
                } else {
                    count_area.css('color','black');
                }
            });
            //イベント設定
            $(obj).bind("change",function(){
                //changeイベントでサロゲートペア文字は削除する(ロリポップサーバーでは保存できないため)
                var value = $(obj).val().replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,'');
                $(obj).val(value);

                //文字数取得
                var count = $(obj).val().length;

                //文字数反映
                count_area.text( count + '/' + max );

                //最大数チェック
                if(count < max){
                    count_area.css('color','red');
                } else {
                    count_area.css('color','black');
                }
            });
            //初期設定
            $(obj).trigger("keyup");
        }

        setCount("textarea",30);

    });

</script>


<textarea></textarea>


```

# 指定文字数以下

```

<script>

    $(function () {

        function setCount(obj,min){
            //カウント表示用エリアを付与
            var count_area = $('<p class="count t-r">0/' + min + '</p>').insertAfter($(obj));

            //イベント設定
            $(obj).bind("keyup",function(){
                //文字数取得
                var count = $(obj).val().replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,'').length;

                //文字数反映
                count_area.text( count + '/' + min );

                //最大数チェック
                if(count > min){
                    count_area.css('color','red');
                    $("button").addClass("disabled");


                } else {
                    count_area.css('color','black');
                    $("button").removeClass("disabled");


                }
            });
            //イベント設定
            $(obj).bind("change",function(){
                //changeイベントでサロゲートペア文字は削除する(ロリポップサーバーでは保存できないため)
                var value = $(obj).val().replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,'');
                $(obj).val(value);

                //文字数取得
                var count = $(obj).val().length;

                //文字数反映
                count_area.text( count + '/' + min );

                //最大数チェック
                if(count > min){
                    count_area.css('color','red');
                    $("button").addClass("disabled");
                } else {

                    count_area.css('color','black');
                    $("button").removeClass("disabled");
                }
            });
            //初期設定
            $(obj).trigger("keyup");
        }

        setCount("textarea",30);

    });

</script>


```