web-dev-qa-db-fra.com

Compte à rebours de personnages comme sur twitter

Comment puis-je faire un compte à rebours pour les "caractères restants" comme celui sur Twitter avec jQuery? Et aussi limiter la saisie à une zone de texte.

jquerytwitter
41
argon

Faites une span et textarea et donnez-leur des sélecteurs uniques (en utilisant un ID ou une classe) comme ceci:

<textarea class="message" rows="2" cols="30"></textarea>
<span class="countdown"></span>

Et ensuite, créez une fonction de mise à jour comme suit:

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('.message').val().length;
    jQuery('.countdown').text(remaining + ' characters remaining.');
}

Et activez cette fonction lorsque la page est chargée et chaque fois que le message est modifié:

jQuery(document).ready(function($) {
    updateCountdown();
    $('.message').change(updateCountdown);
    $('.message').keyup(updateCountdown);
});

Visiter un exemple et voir la source . jQuery rend les choses comme cela très simple.

83
Brian McKenna

J'ai utilisé le plugin jQuery d'Aaron Russell simplement dénombrable avec succès; cependant, si je l'avais écrit, je l'aurais conçu un peu différemment (création automatique de div div, utilisation d'un attribut data-maxlength au lieu d'un plugin, etc.).

Utilisation simple:

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

Utilisation avancée:

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

C'est un suicide d'utiliser jQuery, Mootools ou similaire pour une tâche aussi simple ... sauf si vous les utilisez déjà pour autre chose.

Fonction javascript simple:

function limitTextCount(limitField_id, limitCount_id, limitNum)
{
    var limitField = document.getElementById(limitField_id);
    var limitCount = document.getElementById(limitCount_id);
    var fieldLEN = limitField.value.length;

    if (fieldLEN > limitNum)
    {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else
    {
        limitCount.innerHTML = (limitNum - fieldLEN) + ' charachter(s) to go.';
    }
}

Le premier paramètre est id de l’entrée/zone de texte . Le second - id du div pour afficher les caractères restants . Le troisième est la limite elle-même.

Et HTML simple:

<input type="text" value="" name="title" id="title" maxlength="100" onkeyup="limitTextCount('title', 'divcount', 100);" onkeydown="limitTextCount('title', 'divcount', 100);">
<br>
<div id="divcount">100 charachter(s) to go..</div>
8
Nikolay Ivanov

J'ai ajouté une fonction de pluralisation simple, car personne n'aime la mauvaise grammaire.

function pluralize(count, Word){
  if (count == 1 || count == -1){
    return String(count) + ' ' + Word;
  }else{
    return String(count) + ' ' + Word + 's';
  }
}

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('#micropost_content').val().length;
    jQuery('.countdown').text(pluralize(remaining,'character') + ' remaining');
}

...
4
chorbs

Nous avons fini par créer une solution JS personnalisée qui fonctionne avec n’importe quelle entrée de classe "limitée". Il utilise un attribut de données personnalisé HTML5 ("data-maxlength") pour spécifier la longueur. Bien sûr, ce n’est pas aussi complet que le plugin mentionné par Ryan. Mais nous avions besoin de plusieurs compteurs ajoutés dynamiquement qui ne semblaient pas être pris en charge par le plugin. J'espère que cela pourra aider.

function addCharacterCount(input) {
  var $input    = $(input),                                                                     
      maxLength = $input.data('maxlength'),
      remaining = maxLength - $input.val().length;                                              
  $('<label><input type="text" id="' + input.id + '-counter" size="3" value="' + remaining + '" /> Characters remaining (max ' + maxLength + ')</label>').insertAfter(input);
}

$('form .limited').each(function () {                                                           
  addCharacterCount(this);                                                                      
}); 

$('form .limited').live('keyup', function() {                                                   
  var $element = $(this),
      maxLength = $element.data('maxlength');
  $("#" + this.id + "-counter").val(maxLength - $element.val().length);
});
3
Mat Schaffer

J'ai mis à jour la version de @Brian McKenna pour plusieurs textarea/textbox avec l'attribut maxlegth.

Démo ici

<textarea class="message" rows="2" cols="30" maxlength="60"></textarea>
<span class="countdown"></span>

<textarea class="message" rows="2" cols="30"  maxlength="100"></textarea>
<span class="countdown"></span>

Lors du chargement de la page, tous comptent.

jQuery(document).ready(function($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

});

Faites deux fonctions pour le nombre de mises à jour.

function updateCountdownAll() {
        $('.message').each(function () {
            updateCountdown(this);
        });
    }

    function updateCountdown(e) {

        var currentElement;
        if (e.target) {
            currentElement = e.target;
        }
        else {
            currentElement = e;
        }

        var maxLengh = $(currentElement).attr('maxlength');
        var remaining = maxLengh - $(currentElement).val().length;
        $(currentElement).nextAll('.countdown:first').text(remaining + ' character(s) remaining.');
    }
1
Rikin Patel

utiliser jquery 

enregistrer ceci sous jquery.textlimiter.js

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);

usage 

<textarea id="text" maxlength="100" cols="50" rows="5" placeholder="Enter Text"></textarea>
    <div id="chars">100</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="path/to/jquery.textlimiter.js"></script>
<script>
$(document).ready( function() {
    var elem = $("#chars");
    $("#text").limiter(100, elem);
});
</script>
0
Sujay sreedhar

Dans mon implémentation, j'ai ajouté la fonction JS suivante:

function charactersRemaining(elementID, messageElementID, maxCharacters)
{
    var remaining = maxCharacters - $('#' + elementID).val().length;
    $('#' + messageElementID).text(remaining + ' characters remaining.');
}

Ensuite, je pourrais réutiliser cette fonction dans toute l'application (par exemple, si j'avais le code HTML suivant):

<textarea class="form-control" asp-for="Comments" rows="3"></textarea>
<span id="commentsCharsRemaining" class="text-primary"></span>

Ajoutez simplement ces 2 instructions jquery pour que cela fonctionne:

$('#Comments').change(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});
$('#Comments').keyup(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});
0
Brian Edwards

HTML:

<form>
    <!-- remember to markup your forms properly using labels! -->
    <label for="textareaChars">No more than 100 characters</label>

    <textarea id="textareaChars" maxlength="100"></textarea>

    <p><span id="chars">100</span> characters remaining</p>

</form>

JS:

$( document ).ready(function() {
    var maxLength = 100;
    $('textarea').keyup(function() {
        var length = $(this).val().length;
        var length = maxLength-length;
        $('#chars').text(length);
    });
});
0
Rhonda Te Moananui