Countdown verfügbare Leerzeichen in einem Textfeld mit jquery oder anderen?

Ich habe ein paar Bereiche auf meiner Website, wo ich die Texteingabe auf X Menge von Zeichen beschränken muss und es ist nett, eine Anzahl von freien Räumen anzuzeigen, während ein Benutzer eingibt, wie Twitter tut.Countdown verfügbare Leerzeichen in einem Textfeld mit jquery oder anderen?

Ich habe dieses jquery-Plugin gefunden; jquery max-length plugin

Es tut genau das, was ich brauche, aber es scheint ein bisschen wie viel des Guten, ich bin der Dateigröße nicht sicher, aber es sieht aus wie eine Menge von Zeilen Code für eine so einfache Aufgabe, denken Sie, ich weg wäre besser Verwenden Sie eine Nicht-Jquery-Methode? Der Grund, warum ich dachte, Jquery war der Weg zu gehen ist, weil Jquery bereits in allen meinen Seiten enthalten ist UPDATE;

Ich habe gerade diese non-jquery-Methode gefunden, die genau das gleiche ist, ist viel kleinerer Footprint, also wäre das die bessere Methode?

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

Quelle

2009-08-09 JasonDavis

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

@ConnorLeech Dies ist 5 Jahre alt – JasonDavis

Ich würde dieses Plugin vorschlagen, aktiv mantained: http: // mimo84 .github.io/bootstrap-maxlength/Haftungsausschluss: Ich bin der Autor –

Sehr einfach in 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>

Ersatz der 200 von whateve Ihr Limit ist.

Beachten Sie, dass dies die tatsächliche Texteingabe nicht einschränkt, sondern nur herunter zählt. Sie müssen Server-Seite für die Eingabe Länge überprüfen, dies ist nur ein visueller Helfer.

Nebenbei, ich glaube nicht, dass Sie versuchen sollten, die Eingangslänge zu begrenzen, indem Sie jede Eingabe verweigern, wenn das Limit erreicht ist. Es ist ein Schmerz in der Rückseite Usability-weise und kann nicht auf jeden Fall verlassen werden. Ein einfacher Countdown und serverseitige Überprüfung ist die beste Option IMHO.

Quelle

2009-08-09 06:09:43 deceze

+1 zur Vereinfachung –

+12

Für jeden, der dies implementiert, würde ich 'bind (" propertychange Eingabe textInput ") über' keyup' empfehlen. Diese Ereignisse erkennen alle Arten von Eingaben, nicht nur über die Tastatur. –

Oder anstelle von '.bind()', wie von jQuery 1.7, bietet die '.on()' Methode alle erforderlichen Funktionen zum Anhängen von Event-Handlern und wird bevorzugt. '$ ('# myTextarea'). on (" propertychange Eingabe textInput ", funtion() {...});'. Siehe akzeptierte Antwort [hier] (http://stackoverflow.com/questions/8359085/delegate-vs-on) für weitere Informationen. – chrisjleu

jQuery verwenden, vorausgesetzt, dass Sie ein Textfeld mit der ID Feld haben, die Sie wollen zu 100 Zeichen beschränken, und ein anderes Element mit id Zeichen-Rest die Anzahl der verfügbaren Zeichen angezeigt werden:

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

Quelle

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>

Quelle

2009-08-09 10:17:18 Raghav

I verwendet jQuery und die answer von deceze und zwickte es dann mir einen Twitter-Stil Countdown zu geben, so dass die Nutzer durch, wie sie über gegangen waren viel sehen können und dessen Text entsprechend anpassen. Ich steckte es in seine eigene Funktion auch, damit ich es von einer anderen Funktion aufrufen können, die manchmal das Textfeld automatisch ausgefüllt:

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

Quelle

2009-09-30 03:45:23 Falkayn

Könnten Sie bitte ein jsfiddle.com zeigen es in Aktion? – JasonDavis

I Aaron Russell simply countable jQuery plugin mit Erfolg

Einfache Nutzung verwendet haben:

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

Erweiterte Nutzung:

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

Quelle

2010-01-26 00:11:58

danke für die Antwort, ich schaue auf viele Optionen, aber dieses Plugin ist wirklich riesig in der Größe für solch eine einfache Aufgabe – JasonDavis

Ich habe dieses Plugin auch verwendet - sehr gut! Persönlich macht mir die Dateigröße nichts aus, da dieses Plugin so viel solide Funktionalität für das Zählen/Begrenzen von Wörtern und Zeichen bietet. –

Manchmal müssen Sie mehr als einen Textbereich haben und möchten, dass sie einzeln adressiert werden, ohne für jeden Code zu codieren. Dieser Code fügt dynamisch die Zeichen hinzu, die zu einem Attribut mit maxLength gehören ...

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

Quelle

2011-12-13 21:59:43 gordon

Während CTRL-V Keyboard Pasten den Countdown auslösen, nicht Mauspasten. Ich habe den Countdown-Text eine Funktion updaten lassen und diese dann sowohl mit keyup als auch mit blur aufrufen: '$ (this) .keyup (function() {myFcn (this)}). Blur (function() {myFcn (this)}). keyup(); 'und' function myFcn (argE) { var tId = $ (argE) .attr ("id"); var tMax = $ (argE) .attr ("maxLength"); var left = tMax - $ (argE) .val(). Länge; if (links <0) links = 0; $ (argE) .val ($ (argE) .val() .substr (0, tMax)); $ ('# cnt' + tId).Text ('verbleibende Zeichen:' + links); } 'Der Versuch, das Paste-Ereignis zu behandeln, wurde für mich hässlich – gordon

Natürlich erkennen echte Browser wie FireFox jetzt ein maxLength-Attribut von textarea :) – gordon

Also nahm ich @deceze Version und fügte ein wenig Trick zu machen:

zeigen immer und nicht nur, wenn der Benutzer die Eingabe beginnt,
Show minus, wenn die Grenze vorbei ist und

Add-Klasse - den Text Farbe - wenn es über die Grenze ist (extra CSS ist dafür natürlich erforderlich)

$(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); 
    }); 
});

Für alle die gleiche wie mich brauchen :)

Quelle

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

     });

Quelle

2015-03-29 14:28:28

Wenn du antwortest, musst du auch erklären, wie du deinen Code verwendest . – ZygD

@ZygD Diese Frage wurde so oft beantwortet, seit ich sie 2009 veröffentlicht habe !! Auf jeden Fall ist es schön, verschiedene Ansätze mit dem gleichen Ergebnis zu sehen. Ich mag die Idee, eine Übermittlungsschaltfläche zu deaktivieren, wenn das Textfeld zu viele Zeichen enthält! Basierend auf dieser Antwort habe ich gerade diese JSFiddle-Demo erstellt ... http://jsfiddle.net/jasondavis/ht7qdL3m/ – JasonDavis

Ich versuche nur, eine Abfrage wie Twitter zu schreiben. Ich arbeite auch an einigen verschiedenen Aspekten von Twitter, wie wenn Charaktere gehen in -ve-Wert. text von textarea hervorgehoben in roter farbe –

Beachten Sie, dass Sie für Zeilenumbrüche sind 2 Zeichen zu berücksichtigen haben.
Ich baute auf den hier zur Verfügung gestellten Lösungen auf den folgenden Code, der für neue Zeilen verantwortlich ist.

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

Quelle

2015-10-12 20:05:19 trainer

Countdown verfügbare Leerzeichen in einem Textfeld mit jquery oder anderen?

Antwort

Verwandte Themen