计数超过限制后如何添加班级

Question

我想在textarea输入超过max word时添加text-danger类。

这是我尝试的

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");
  }
}

我的表格

<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

您可以为此使用更改事件

var max_chars = 230;

$(document).on('change','#description', function () {
  if (max_chars < $(this).val().trim()){
    $(this).addClass("text-danger");
  } else {
    $(this).removeClass('text-danger')
  }
});

也可以做到如下

$(document).on('keyup keydown change','#description', function () {
  if (max_chars < $(this).val().trim()){
    $(this).addClass("text-danger");
  } else {
    $(this).removeClass('text-danger')
  }
});

您可以参考Jquery Keyup方法以获取更多详细信息

Answer 2

您可以只使用jQuery。 将keyup事件侦听器添加到文本区域，并检查其值的长度

 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> 

Answer 3

使用香草JavaScript：

 function setupLimitTextArea ( limit ) { function output ( length ) { count.textContent = length; } function getLength () { return textarea.value.length; } function hasClass () { return classList.contains( classDanger ); } function addClass () { if ( !hasClass() ) classList.add( classDanger ); } function remClass () { if ( hasClass() ) classList.remove( classDanger ); } function setupEventListener () { // Add event listener for both keyup and keydown [ 'keyup', 'keydown' ].forEach( eventType => { textarea.addEventListener( eventType, handleTextArea ); }); } function handleTextArea () { // Get the textarea value length let length = getLength(); // Show the current length output( length ); // If length > limit add class, else remove class length > limit ? addClass() : remClass(); } // Geting DOM elements and setting CSS class information const note = document.getElementById( 'descnote' ), count = document.getElementById( 'count_char' ), textarea = document.getElementById( 'description' ), classDanger = 'text-danger', classList = note.classList; // Add event listener to textarea setupEventListener(); // Show the initial count output( getLength() ); } // Usage example setupLimitTextArea( 230 ); 

 body { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .text-danger { color: red; } 

 <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>