Deseo agregar la clase text-danger cuando escribo más de la palabra máxima en textarea.

Aqui lo que intento

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

Mi forma

<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>
0
Jazuly 8 sep. 2018 a las 04:42

3 respuestas

La mejor respuesta

Puede hacerlo usando solo jquery. Agregue el receptor de eventos keyup al área de texto y verifique la longitud de su valor

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>
2
brk 8 sep. 2018 a las 01:48

Puede usar el evento de cambio para este mismo

var max_chars = 230;

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

También puede hacerlo de la siguiente manera

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

Puede consultar el método Jquery Keyup para obtener más detalles

3
Som 8 sep. 2018 a las 05:47

Usando JavaScript vainilla:

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>
1
sphinxplayer 8 sep. 2018 a las 03:14