it-swarm.com.de

Textfeldzeichen zählen

Ich entwickle auf dieser Website eine Zeichenanzahl für meinen Textbereich. Im Moment heißt es NaN, weil es anscheinend nicht die Länge der Zeichen im Feld findet, die zu Beginn 0 sind, also 500 sein sollte. In der Konsole in Chrome-Entwicklerwerkzeugen treten keine Fehler auf. Der gesamte Code befindet sich auf der Website. Ich habe sogar versucht, mit jQuery ein reguläres JavaScript für die Anzahl der Zeichen für das Textfeld zu verwenden, aber es scheint nichts zu funktionieren.

Sagen Sie mir bitte, was ich falsch mache, sowohl in jQuery als auch in dem JavaScript-Code, den ich in meiner Datei contact.js habe.

$(document).ready(function() {
    var tel1 = document.forms["form"].elements.tel1;
    var tel2 = document.forms["form"].elements.tel2;
    var textarea = document.forms["form"].elements.textarea;
    var clock = document.getElementById("clock");
    var count = document.getElementById("count");

    tel1.addEventListener("keyup", function (e){
        checkTel(tel1.value, tel2);
    });

    tel2.addEventListener("keyup", function (e){
        checkTel(tel2.value, tel3);
    });

    /*$("#textarea").keyup(function(){
        var length = textarea.length;
        console.log(length);
        var charactersLeft = 500 - length;
        console.log(charactersLeft);
        count.innerHTML = "Characters left: " + charactersLeft;
        console.log("Characters left: " + charactersLeft);
    });​*/

    textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
});

function checkTel(input, nextField) {
    if (input.length == 3) {
        nextField.focus();
    } else if (input.length > 0) {
        clock.style.display = "block";
    } 
}

function textareaLengthCheck(textarea) {
    var length = textarea.length;
    var charactersLeft = 500 - length;
    count.innerHTML = "Characters left: " + charactersLeft;
}
26
Ilan Biala
$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

Das obige wird tun, was Sie wollen. Wenn Sie einen Countdown durchführen möchten, ändern Sie ihn wie folgt:

$("#textarea").keyup(function(){
  $("#count").text("Characters left: " + (500 - $(this).val().length));
});

Alternativ können Sie dasselbe auch ohne jQuery mit dem folgenden Code erreichen. (Danke @Niet)

document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
};
64
Andrew Hubbs
textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);

Sie rufen auf textareaLengthCheck und weisen dann den Rückgabewert dem Ereignis-Listener zu. Deshalb wird es nach dem Laden nicht aktualisiert oder ausgeführt. Versuche dies:

textarea.addEventListener("keypress",textareaLengthCheck,false);

Außerdem:

var length = textarea.length;

textarea ist der eigentliche Textbereich, nicht der Wert. Versuchen Sie es stattdessen:

var length = textarea.value.length;

Kombiniert mit dem vorherigen Vorschlag sollte Ihre Funktion sein:

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};
13

Accepted Die akzeptierte Lösung ist veraltet.

Hier sind zwei Szenarien, in denen das Ereignis keyup nicht ausgelöst wird:

  1. Der Benutzer zieht Text in den Textbereich.
  2. Der Benutzer kopiert den Text im Textbereich mit einem Rechtsklick (Kontextmenü).

Verwenden Sie stattdessen das HTML5-Ereignis input für eine robustere Lösung:

<textarea maxlength='140'></textarea>

JavaScript ( Demo ):

var textarea = document.querySelector("textarea");

textarea.addEventListener("input", function(){
    var maxlength = this.getAttribute("maxlength");
    var currentLength = this.value.length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Und wenn Sie unbedingt jQuery verwenden wollen:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});
13
Etienne Martin

Hier ist einfacher Code. Ich hoffe es funktioniert

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');

$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

8
Shafiqul Islam

Dieser Code erhält den Maximalwert aus dem maxlength-Attribut der textarea und verringert den Wert bei Eingabe des Benutzers.

< DEMO >

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};
<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>

2
Kurenai Kunai

Für diejenigen, die eine einfache Lösung ohne jQuery wünschen, ist hier ein Weg.

textbereich und Nachrichtencontainer zum Einfügen in Ihr Formular:

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript:

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

Das Skript zählt die Zeichen anfangs und dann für jeden Tastenanschlag und setzt die Zahl in den Zählerbereich.

Martin

1

Diese Lösung reagiert auf Tastatur- und Mausereignisse und gilt für den Anfangstext.

    $(document).ready(function () {
        $('textarea').bind('input propertychange', function () {
            atualizaTextoContador($(this));
        });

        $('textarea').each(function () {
            atualizaTextoContador($(this));
        });
    });

    function atualizaTextoContador(textarea) {
        var spanContador = textarea.next('span.contador');
        var maxlength = textarea.attr('maxlength');
        if (!spanContador || !maxlength)
            return;
        var numCaracteres = textarea.val().length;
        spanContador.html(numCaracteres + ' / ' + maxlength);
    }
    span.contador {
        display: block;
        margin-top: -20px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>
0
Junior

Ich habe festgestellt, dass die akzeptierte Antwort aus textareas aus Chrome-Gründen, die im Textbereich mit dem Maxlength-Attribut falsch sind, aufgrund von Zeilenvorschub- und Wagenrücklaufzeichen nicht genau funktioniert. Dies ist wichtig, wenn Sie wissen, wie viel Speicherplatz benötigt wird beim Speichern der Informationen in einer Datenbank aufgenommen werden. Außerdem wird die Verwendung von Keyup aufgrund von Drag & Drop und Einfügen von Text aus der Zwischenablage abgeschrieben. Daher habe ich die Ereignisse input und propertychange verwendet. Im Folgenden werden Zeilenumbrüche berücksichtigt und die Länge einer textarea genau berechnet.

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

    $("#counter").html(curlen);
  });
});

$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />

0
Nielsvh

var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message" name="text"></textarea>

    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});
0
PK-1825

Sie sagen, dass IE Probleme mit dem input-Ereignis hat, aber ansonsten ist die Lösung eher unkompliziert.

ta = document.querySelector("textarea");
count = document.querySelector("label");

ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});
<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>

0
Ron Royston