Question

我想在text-danger中键入多个单词时添加类textarea。

这是我尝试的

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 method以获得更多详细信息

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>

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

3 个答案: