it-swarm.com.de

Charakter-Countdown wie auf Twitter

Wie kann ich mit "jQuery" einen Countdown "verbleibende Zeichen" wie den auf Twitter machen? Und auch die Eingabe auf einen Textbereich beschränken.

41
argon

Erstellen Sie eine span und textarea und geben Sie ihnen (mit einer ID oder Klasse) eindeutige Selektoren wie folgt:

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

Und dann eine Update-Funktion wie folgt machen:

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

Führen Sie diese Funktion aus, wenn die Seite geladen ist und wenn die Nachricht geändert wird:

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

Besuchen Sie ein Beispiel und sehen Sie sich die Quelle an . jQuery macht solche Dinge sehr einfach.

83
Brian McKenna

Ich habe Aaron Russells einfach zählbares jQuery-Plugin mit Erfolg verwendet; Wenn ich es jedoch geschrieben hätte, hätte ich es etwas anders gestaltet (automatische Erstellung von Zählern, Verwendung eines data-maxlength-Attributs anstelle einer Plugin-Option usw.).

Einfache Verwendung:

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

Erweiterte Nutzung:

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

Es ist ein Selbstmord, jQuery, Mootools oder ähnliches für so eine einfache Aufgabe zu verwenden ... es sei denn, Sie verwenden sie bereits für etwas anderes.

Einfache Javascript-Funktion:

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.';
    }
}

Der erste Parameter ist die ID des Eingabe-/Textbereichs . Die zweite ID des div, um die verbleibenden Zeichen anzuzeigen . Der dritte ist das Limit selbst.

Und einfaches HTML:

<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

Ich habe eine einfache Funktion zum Pluralisieren hinzugefügt, weil niemand schlechte Grammatik mag.

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

Am Ende haben wir eine angepasste JS-Lösung erstellt, die für jede Eingabe mit der Klasse "limitiert" funktioniert. Es verwendet ein benutzerdefiniertes HTML5-Datenattribut ("data-maxlength"), um die Länge anzugeben. Natürlich ist dies bei weitem nicht so umfassend wie das von Ryan erwähnte Plugin. Wir brauchten jedoch mehrere dynamisch hinzugefügte Leistungsindikatoren, die vom Plugin nicht unterstützt wurden. Hoffentlich hilft das.

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

Ich habe die @ Brian McKenna-Version für mehrere Textbereiche/Textfelder mit maxlegth-Attribut aktualisiert.

Demo hier

<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>

Beim Laden der Seite zählen alle.

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

});

Machen Sie zwei Funktionen für die Aktualisierung.

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

verwenden Sie Jquery 

speichern Sie dies als 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);

verwendungszweck 

<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

In meiner Implementierung habe ich die folgende JS-Funktion hinzugefügt:

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

Dann könnte ich diese Funktion in der gesamten Anwendung wiederverwenden (z. B. wenn ich folgendes HTML hätte):

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

Fügen Sie einfach diese beiden Jquery-Anweisungen hinzu, damit es funktioniert:

$('#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