Cuenta atrás espacios disponibles en un área de texto con jquery u otro?

Tengo algunas áreas en mi sitio donde necesito limitar el ingreso de texto a X cantidad de caracteres y es agradable mostrar una cantidad de espacios restantes mientras un usuario ingresa, como Twitter.Cuenta atrás espacios disponibles en un área de texto con jquery u otro?

Encontré este plugin jquery; jquery max-length plugin

Lo hace justo lo que necesito pero parece algo así como una exageración, no estoy seguro de que el tamaño del archivo, pero parece que una gran cantidad de líneas de código para una tarea tan sencilla, ¿cree que estaría mejor usando un método no-jquery? La razón por la que estaba pensando en jquery era el camino a seguir porque jquery ya está incluido en todas mis páginas ACTUALIZACIÓN;

Acabo de encontrar este método no-jquery que hace exactamente lo mismo es mucho más pequeño, así que este sería el mejor método?

<script language="javascript" type="text/javascript"> 
function limitText(limitField, limitCount, limitNum) { 
    if (limitField.value.length > limitNum) { 
    limitField.value = limitField.value.substring(0, limitNum); 
    } else { 
    limitCount.value = limitNum - limitField.value.length; 
    } 
} 
</script> 

You have 
<input readonly type="text" name="countdown" size="3" value="1000"> 
characters left.

Fuente

2009-08-09 JasonDavis

http://stackoverflow.com/questions/2136647/character-countdown-like-on-twitter –

@ConnorLeech Se trata de 5 años de edad – JasonDavis

que sugeriría este plugin, mantenida de forma activa: http: // mimo84 .github.io/bootstrap-maxlength/Descargo de responsabilidad: soy el autor –

muy simple en jQuery:

<textarea id="myTextarea"></textarea> 
<p id="counter"></p> 

<script type="text/javascript"> 
$('#myTextarea').keyup(function() { 
    var left = 200 - $(this).val().length; 
    if (left < 0) { 
     left = 0; 
    } 
    $('#counter').text('Characters left: ' + left); 
}); 
</script>

sustituto del 200 por whateve tu límite es.

Tenga en cuenta que esto no limita la entrada de texto real, simplemente cuenta atrás. Necesita verificar la longitud de entrada del lado del servidor, esto es solo un ayudante visual.

Como nota aparte, no creo que deba intentar limitar la longitud de entrada negando cualquier entrada cuando se alcanza el límite. Es un dolor en la parte posterior de usabilidad y no se puede confiar en él de todos modos. Una simple cuenta regresiva y la verificación del lado del servidor es la mejor opción en mi humilde opinión.

Fuente

2009-08-09 06:09:43 deceze

+1 por simplicidad –

+12

Para cualquiera que implemente esto, recomendaría usar 'bind (" propiedadchange textInput ")' sobre 'keyup'. Esos eventos detectarán todas las formas de entrada, no solo desde el teclado. –

O en lugar de '.bind()', a partir de jQuery 1.7, el método '.on()' proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos y es preferible. '$ ('# myTextarea'). on (" propertychange input textInput ", funtion() {...});'. Vea la respuesta aceptada [aquí] (http://stackoverflow.com/questions/8359085/delegate-vs-on) para obtener más información. – chrisjleu

Usando jQuery, asumiendo que tiene un área de texto con id campo que desea limitar a 100 caracteres, y otro elemento con id caracteres-restante para mostrar el número de caracteres disponibles:

var max = 100; 
$('#field').keyup(function() { 
    if($(this).val().length > max) { 
     $(this).val($(this).val().substr(0, max)); 
    } 
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining'); 
});

Fuente

2009-08-09 06:09:33 bryan

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() 
     { 
      $('#TestId').keyup(function(e) 
      { 
       var maxLength = 100; 
       var textlength = this.value.length; 
       if (textlength >= maxLength) 
       { 
        $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!'); 
        this.value = this.value.substring(0, maxLength); 
        e.preventDefault(); 
       } 
       else 
       { 
        $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.'); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <textarea id="TestId" cols="20" rows="8"></textarea><br /> 
    (Maximum characters: 100)<br /> 
    <span id="charStatus"></span> 
</body> 
</html>

Fuente

2009-08-09 10:17:18 Raghav

que utiliza jQuery y el answer por deceze y luego pellizcó a darme una cuenta regresiva al estilo de Twitter para que los usuarios pudieran ver por cuánto habían ido y ajustar su texto en consecuencia. También me puse en su propia función para que pudiera llamarlo desde otra función que a veces poblaron el área de texto de forma automática:

function reCalcToText() { 
     var left = 200 - $('.toText').val().length; 
     if (left < 0) { 
      $('#counter').text(left); 
      $('#counter').addClass("excess"); 
     } else { 
      $('#counter').text(left); 
      $('#counter').removeClass(); 
     } 
    } 
    function onReady() { 
        $('#<%= toText.ClientID %>').keyup(function() { 
      reCalcToText(); 
     }); 
    };

Fuente

2009-09-30 03:45:23 Falkayn

¿Podrías publicar un jsfiddle.com mostrándolo en acción? – JasonDavis

He usado

Uso simple de simply countable jQuery plugin con éxito Aaron Russell:

$('#my_textarea').simplyCountable();

uso avanzado:

$('#my_textarea').simplyCountable({ 
    counter: '#counter', 
    countable: 'characters', 
    maxCount: 140, 
    strictMax: false, 
    countDirection: 'down', 
    safeClass: 'safe', 
    overClass: 'over', 
    thousandSeparator: ',' 
});

Fuente

2010-01-26 00:11:58

gracias por la respuesta, veo muchas opciones, pero este plugin es realmente enorme en tamaño para una tarea tan simple – JasonDavis

He usado este plugin también - ¡muy bueno! Personalmente, no me importa el tamaño del archivo, ya que este plugin ofrece tanta funcionalidad sólida para conteo/limitación de palabras y caracteres. –

A veces necesita tener más de un área de texto y desea que se aborden de forma individual sin tener que codificar cada una. Este código agrega dinámicamente los caracteres restantes a cualquiera que tenga un atributo maxLength ...

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('textarea[maxLength]').each(function(){ 
     var tId=$(this).attr("id"); 
     $(this).after('<br><span id="cnt'+tId+'"></span>'); 
     $(this).keyup(function() { 
      var tId=$(this).attr("id"); 
      var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength 
      var left = tMax - $(this).val().length; 
      if (left < 0) left = 0; 
      $('#cnt'+tId).text('Characters left: ' + left); 
     }).keyup(); 
    }); 
}); 
</script> 
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br> 
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br> 
<textarea id="textareaWithoutCounter"></textarea>

Fuente

2011-12-13 21:59:43 gordon

Mientras que las teclas de teclado CTRL-V activan la cuenta atrás, las pasadas del mouse no. Hice que el texto de la cuenta regresiva actualizara una función y luego llamé eso con la combinación de teclas y desenfoque: '$ (this) .keyup (function() {myFcn (this)}). Blur (función() {myFcn (this)}). keyup(); 'y' function myFcn (argE) { var tId = $ (argE) .attr ("id"); var tMax = $ (argE) .attr ("maxLength"); var left = tMax - $ (argE) .val(). Length; if (left <0) left = 0; $ (argE) .val ($ (argE) .val(). Substr (0, tMax)); $ ('# cnt' + tId).texto ('Caracteres a la izquierda:' + izquierda); } 'Tratar de controlar el evento pasta se pusieron feas para mí – gordon

Por supuesto navegadores como FireFox reales reconocen ahora un área de texto maxLength atributo :) – gordon

Tomé luego @deceze versión y añadió un poco de truco para hacerlo:

espectáculo de siempre y no sólo cuando el usuario comienza a escribir,
muestran menos cuando el límite es de más y

clase

complemento - para colorear el texto - cuando está sobre el límite (se necesita css extra para esto, por supuesto)

$(document).ready(function(){ 
    var left = 200 
    $('#field_counter').text('Characters left: ' + left); 

     $('#id_description').keyup(function() { 

     left = 200 - $(this).val().length; 

     if(left < 0){ 
      $('#field_counter').addClass("overlimit"); 
     } 
     if(left >= 0){ 
      $('#field_counter span').removeClass("overlimit"); 
     } 

     $('#field_counter').text('Characters left: ' + left); 
    }); 
});

para cualquiera que necesite lo mismo que yo :)

Fuente

2012-03-06 15:46:24 Christoffer

var max = 140; 
     $("#spn").html(max+" Remaining"); 
     $("#textarea").keyup(function() { 
      var lenght1 = $("#textarea").val().length; 
      var remaining = max - lenght1; 
      $("#spn").html(remaining + " Remaining"); 
      if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); } 
      if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); } 

     });

Fuente

2015-03-29 14:28:28

Al responder, para que sea una respuesta buena y útil que necesita para explicar también cómo utilizar su código . – ZygD

@ZygD Esta pregunta ha sido contestada tantas veces desde que Iniciado en 2009 !! En cualquier caso, es bueno ver diferentes enfoques con el mismo resultado. Me gusta la idea de deshabilitar un botón de envío cuando el área de texto tiene demasiados caracteres! Sobre la base de esta respuesta que acabo de crear esta demo jsFiddle ... http://jsfiddle.net/jasondavis/ht7qdL3m/ – JasonDavis

estoy tratando de escribir una consulta como Twitter también estoy trabajando en algunos aspectos diferentes de Twitter como cuando va caracteres valor in-valor texto de texto resaltado en color rojo –

Tenga en cuenta que usted tiene que dar cuenta de saltos de línea son 2 caracteres.
Me basé en las soluciones proporcionadas aquí en el siguiente código que representa las nuevas líneas.

function DisplayCharactersLeft(idOfInputControl) { 
    var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength"); 

    $("#" + idOfInputControl).on("input", function() { 
     var currentText = $(this).val(); 
     var numberOfNewLines = GetNumberOfNewLines(currentText); 

     var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines); 
     if (left < 0) { left = 0; } 
     $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left); 
    }); 

}  

function GetNumberOfNewLines(text) { 

    var newLines = text.match(/(\r\n|\n|\r)/g); 
    var numberOfNewLines = 0; 
    if (newLines != null) { 
     numberOfNewLines = newLines.length; 
    } 
    return numberOfNewLines; 
}

Fuente

2015-10-12 20:05:19 trainer

Cuenta atrás espacios disponibles en un área de texto con jquery u otro?

Respuesta

Cuestiones relacionadas