如何在计数超出限制后添加课程

Question

i want to add class text-danger when i type more than max word in textarea.

here what i try

var max_chars = 230;
document.getElementById('description').onkeyup = function () {
  document.getElementById('count_char').innerHTML = (max_chars - this.value.length) + "/";
};
$('#description').on('textarea', function () {
  checkWord();
});

function checkWord(){
  var maxword = 230;
  var note = document.getElementById("descnote");
  if (minword < Number($('#description').val().length)){
    note.classList.add("text-danger");
  }
}

my form

<textarea class="form-control" name="description" id="description" form="tambah_post" rows="3" required></textarea>
<small id="count_char"></small><small id="descnote">230 Sisa Rekomendasi.</small>

Answer 1

You may do it using only jquery. Add the keyup event listener to the text area and check the length of it's value

var maxword = 10;
$('#description').on('keyup', function() {
  //remove white space and check if length is greater
  if ($(this).val().trim().length > maxword) {
    //using addclass to add a class
    $(this).addClass('text-danger')
  } else {
    $(this).removeClass('text-danger')

  }
});

.text-danger {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" name="description" id="description" form="tambah_post" rows="3" required></textarea>
<small id="count_char"></small><small id="descnote">230 Sisa Rekomendasi.</small>

</div>