テキストエリアの入力文字数を制限して、注意書きを表示する方法

Question

次のテキストエリアの入力文字数を制限したいのですが、どうもうまくいきません。

<div id="#postexcerpt" class="wpuf-fields">
<span id="excerpt-count"></span>
<textarea class="textareafield wpuf_post_content_4" id="post_content_4" name="post_content" data-required="yes" data-type="textarea" ></textarea>
</div>

wordpressなので、functions.phpにこのように書いているのですが、間違いをご指摘いただけませんでしょうか？

function excerpt_count() {
?>
<script>
  (function($) {
    var count = 100;
    $('#postexcerpt .wpuf_post_content_4').after('<span style=\"padding-left:1em; color:#888; font-size:12px;\">現在の文字数： <span id=\"excerpt-count\"></span> / '+ count +'</span>');
    $('#excerpt-count').text($('.wpuf_post_content_4').val().length);
    $('#excerpt').keyup(function() {
      $('#excerpt-count').text($('.wpuf_post_content_4').val().length);
      if ( $(this).val().length > count ) {
        $('#excerpt-count, #postexcerpt .wpuf-fields textarea').css('color', '#f00');
      } else {
        $('#excerpt-count, #postexcerpt .wpuf-fields textarea').css('color', '#888');
      }
    });
    $('#postexcerpt .wpuf-fields textarea').html('※ここに入力した内容は一覧画面で <strong>"'+ count +'文字"</strong> までは表示されますが、それ以降は省略表示されます。').css('color', '#888');
  }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );

よろしくお願いいたします。<(_ _)>

Answer 1

どのタイミングでチェックする想定でしょうか？
当該のtextareaのon.('input',function()でチェックしてみてはどうでしょうか？

sample

入力制限自体はmaxlengthで処理できますが、確定前の文字でも
inputをチェックすればオーバーした時点で確定させられます。

$(function(){
  $('textarea').on('input',function(){
    var v=$(this).val();
    if(v.length>10){
      $(this).val(v.substr(0,10));
    }
  });
});

<textarea placeholder="10文字まで" maxlength=10>

Comments

[退会済みユーザー]

入力の最中にリアルタイムでチェックしてほしいです。
「keyup」というのが「リアルタムタイムでお願いね」という意味かと思っているのでそれを採用している次第です。

>当該のtextareaのon.('input',function()でチェックしてみては
というと、うーん、ちょっと難しくて分かりません( ﾉД`)

ところでクラスの対応する位置とか書き方などは、あっています、、よね？

[yambejp]

> 難しくて分かりません

sampleつけときました。だいたいの流れをみてみてください