ぬえさぶろうのAnimate放送部

文字数をカウントするしくみ

HTML

<form>
    //テキスト入力
    <input name="blog_title" type="text" id="blog_title" autofocus>
    //文字数カウント
    <p class="text_count">
        <span id="blog_title_count">0</span> 文字 / 40文字まで
    </p>
</form>

JS

//textareaの文字列をカウントする
//ブログタイトル
const blog_title = document.querySelector('#blog_title');
const blog_title_count = document.querySelector('#blog_title_count');
//
blog_title.addEventListener('keyup', () =>{
    blog_title_count.textContent = blog_title.value.length;
    //文字数制限
      if(blog_title.value.length > 40){
          blog_title.classList.add('alert');
      }else{
          blog_title.classList.remove('alert');
      }
});