doumeitang572461
2018-09-08 01:42 阅读 34

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    douchushao7799 douchushao7799 2018-09-08 01:48

    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>
    
    点赞 评论 复制链接分享
  • dongtaogou6226 dongtaogou6226 2018-09-08 03:14

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

    </div>
    
    点赞 评论 复制链接分享
  • dqwmhrxt68679 dqwmhrxt68679 2018-09-08 05:47

    You can use change event for this same

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

    Also can do it as follow

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

    You can refer Jquery Keyup method for more Details

    点赞 评论 复制链接分享

相关推荐