TransWikia.com

Contador de caracteres restantes

Stack Overflow en español Asked by erianvc on November 22, 2021

Quería saber si me pueden ayudar a mejorar este código el cual es un contador en reversa tipo twitter para señalar cuantos caracteres te falta antes de que no puedas escribir mas, funciona en parte porque hay momentos que hace cosas raras como cuando escribes 2 caracteres y luegos los borras en lugar de quedar en la misma posición te llega a quedar 1 caracter menos.

Esta es la parte del text area que cuento los caracteres que se van digitando y un pequeño span abajo es el que muestra la cantidad de caracteres disponibles.

<div class="form-row">
    <div class="col mb-3">
        <div class="form-group">
            <label class="section-title mb-0" for="txaMessage">Su mensaje</label>
            <textarea class="form-control" type="text" name="txaMessage" id="txaMessage" rows="5" required></textarea>
            <div class="text-right"><span class="valid-text pt-3" id="txaCount">30</span></div>
        </div>
    </div>
</div>

Aquí el código que va restando el límite de caracteres con la cantidad de caracteres que se van ingresando, así para poner la cantidad en pantalla y cambiar clases para los estilos.

$(document).ready(function() {
    var limit = 30;
    $("#txaMessage").keydown(function(event) {
        var value = limit - $(this).val().length;

        if (value <= 0) {
            $('#txaMessage').removeClass('is-valid');
            $('#txaMessage').addClass('is-invalid');
            $('#txaCount').html(value);
            $('#txaCount').removeClass('valid-text');
            $('#txaCount').addClass('invalid-text');
        } else if (value > 0) {
            $('#txaMessage').removeClass('is-invalid');
            $('#txaMessage').addClass('is-valid');
            $('#txaCount').html(value);
            $('#txaCount').removeClass('invalid-text');
            $('#txaCount').addClass('valid-text');
        }
    });
});

3 Answers

//CONTADOR DE CARACTERES PARA EL TEXTAREA
var limit = 1000;
$(function() {
    $("#txt_detalle").on("input", function () {
        //al cambiar el texto del txt_detalle
        var init = $(this).val().length;
        total_characters = (limit - init);

        $('#contador').html(total_characters + " caracteres restantes");
    });
});
.contador {
    float: right;
    color: #555555;
    font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<!-- Detalle de la incidencia -->
<div class="detalle">
  <p class="lbl_detalle">Descripción de la incidencia
    <span class="contador" id="contador">1000 caracteres          restantes  
    </span>
  </p>
  <textarea class="txt_detalle" id="txt_detalle" name="txt_detalle" rows="4" cols="50" maxlength="1000"></textarea>
</div>

Answered by oscar castellon on November 22, 2021

En base a lo que pides realicé el siguiente ejemplo, sería cuestión de que agregues las clases de estilos que estás utilizando respectivamente:

$("#txaMessage").on('keypress', function() {
  var limit = 30;
  $("#txaMessage").attr('maxlength', limit);
  var init = $(this).val().length;
  
  if(init<limit){
    init++;
    $('#caracteres').text("Máximo 30 caracteres:" + init); 
  }
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
    <div class="col mb-3">
        <div class="form-group">
            <label class="section-title mb-0" for="txaMessage">Su mensaje</label>
            <textarea class="form-control" type="text" name="txaMessage" id="txaMessage" rows="5" required></textarea>
            <div class="text-right"><span id="caracteres" class="valid-text pt-3" id="txaCount"></span></div>
        </div>
    </div>
</div>

Lo que realicé fue utilizar la función keypress para que al momento de presionar una tecla me evalúe el número de caracteres con una condición sencilla. Además de que mandé el límite de caracteres por medio de Jquery. Espero sea de tu ayuda. Saludos.

Answered by Blas David O. M. on November 22, 2021

Tienes que utilizar "keyup" en lugar de "keydown". Piensa, que keydown en el momento de presionar la tecla, sin soltarla. Entonces estas haciendo el calculo antes de tener el resultado. Entonces el "value" lo calculas antes de tener el texto resultante, sino el texto anterior.

En caso del keyup, es el momento posterior, ya con los cambios.

Keydown yo lo utilizaria para prevenir pulsaciones que no quieres, por ejemplo si no quieres que se pulsan letras y solo quieres numeros.

Answered by Anton Nikolayevich on November 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP