How to add class after count exceed the limit

limit character input in the textarea including count
textarea character count bootstrap
textbox character counter jquery
textarea remaining character count javascript
textarea character count javascript
jquery limit characters input
jquery word limit
textarea character limit javascript

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>

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>

Count characters in textarea, After seeing your complete code, what were you expecting it to do differently? HTML sample, used wherever I need a counter, notice the relevance of IDs of You can create character counters on-the-fly (and also remaining character class for limit excess limitExceededClass: "character-counter-limit-exceeded", // suffix  Adding and Subtracting Property 1. If a is a real number and both. and exist, then. In words, as long as the limits that are added both exist, "The limit of the sum is the sum of the limits.''. = 3 + 9 = 12. Again, "The limit of the sum is the sum of the limits".

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

Building a Web 2.0 Portal with ASP.NET 3.5, When the count exceeds a predefined limit, reject further requests for a specific duration, say 10 minutes. After 10 minutes, allow requests from that IP again. The ActionValidator class maintains a count of specific actions such as first visit, revisit, asynchronous postbacks, adding a new widget, adding a new page, etc. If your using textarea or input there is a max length (maxlength="50" this is in the HTML) property for them or you would have to use Javascript. Also I think I misread this, setting a width will force the sentence to drop to the next line when it hits the end. This is default behaviour. – Ruddy Nov 17 '14 at 13:17.

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>

ASP.NET jQuery Cookbook, To get started with this application, create a new ASP. that is used to display an error message once the character count exceeds the maximum allowable limit. So, for example, if your existing composition is 0:01:30:00 and you want to change that to 2 minutes, you can't just type 0:02:00 and hit ok. You HAVE to type 0:02:00:00 and THEN hit ok. Thanks

Class and participant limits – Help Center, Click Create a class under Classes owned to create new classes. You can still send messages to any of your students individually (even after If you exceed the limits, you can use this helpful resource to manage your class and people. Students can take a combination of ePermit and Baruch courses up to the following limits per term and session: Spring and Fall term: 18 credits. Summer: two courses (up to 8 credits) per session. Ten-week Session 3 counts as one Session 1 and one Session 2.

JAMA: The Journal of the American Medical Association, from larger groups than would have resulted had the natural class interval of 4 been adopted. The limits of normal variation for each group are given by adding each If the rate exceeds *Perminute helics still for another fifteen minutes before and exactly two minutes after the completion of the hopping count, the rate is  Exceed the limit (5) SPEED: Rate of progress (5) 186,000 miles/second, for light (5) 1994 film set on a bus (5) Drive too fast (5) Miles per hour, e.g. (5) Runaway-bus movie (5) One way to attract a trooper (5) It helps you get ahead (5) Risk a ticket (5) It can kill on the road (5) Go faster than 65, say (5) Floor it (5) Highway hazard (5)

jQuery: Limit character input in the textarea including count , Limit character input in the textarea including count. Sample HTML Code : <body​> <form> <label>Maximum 15 characters</label> <textarea id="  the six-drop limit will be indicated on the official transcript. If the transfer transcript does not indicate any drops toward the limit, San Jacinto College will set the drop count for that institution at zero. If the transfer institution indicates affected drops of 1 through 6, that number will set as the drop count from that institution.

Comments
  • its work thanks, waiting for 2 minutes to acc u answer.