javascript - para - textarea en un formulario html

Personajes de textarea contar

Question

Estoy desarrollando un recuento de caracteres para mi área de texto en este website . En este momento, dice NaN porque parece no encontrar la longitud de cuántos caracteres hay en el campo, que al principio es 0, por lo que el número debería ser 500. En la consola de herramientas de desarrollador de Chrome, no se produce ningún error. Todo mi código está en el sitio, incluso intenté usar jQuery con un JavaScript regular para el recuento de caracteres en el campo de área de texto, pero nada parece funcionar.

Por favor, dígame qué estoy haciendo mal tanto en jQuery como en el código JavaScript que tengo en mi archivo contact.js.

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

Answer 1

⚠️ La solución aceptada está desactualizada.

Aquí hay dos escenarios en los que el evento keyup no se activará:

1. El usuario arrastra texto en el área de texto.
2. El usuario copia y pega texto en el área de texto con un clic derecho (menú contextual).

Utilice el evento de input HTML5 en lugar de una solución más robusta:

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

Y si absolutamente quieres usar jQuery:

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

Answer 2

Aquí está el código simple. Espero que este funcionando

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

Answer 3

Descubrí que la respuesta aceptada no funcionaba exactamente con textarea s por las razones que se mencionan en Chrome cuenta los caracteres incorrectos en textarea con el atributo maxlength debido a los caracteres de nueva línea y de retorno de carro, lo cual es importante si necesita saber cuánto espacio se ocupará Al almacenar la información en una base de datos. Además, el uso de keyup se deprecia debido a la función de arrastrar y soltar y al pegado de texto desde el portapapeles, razón por la cual utilicé los eventos input y propertychange . Lo siguiente toma en cuenta los caracteres de nueva línea y calcula con precisión la longitud de un área de textarea .

$(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" />

Answer 4

Dicen que IE tiene problemas con el evento de input , pero aparte de eso, la solución es bastante sencilla.

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>

Answer 5

Este código obtiene el valor máximo del atributo maxlength del maxlength de textarea y disminuye el valor a medida que el usuario escribe.

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

Answer 6

Para aquellos que desean una solución simple sin jQuery, aquí hay una manera.

Textarea y mensaje contenedor para poner en su formulario:

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

La secuencia de comandos cuenta los caracteres inicialmente y luego para cada pulsación de tecla y coloca el número en el intervalo del contador.

Martín

Answer 7

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>

Answer 8

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

Answer 9

$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

Lo anterior hará lo que quieras. Si quieres hacer una cuenta atrás, cámbiala a esto:

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

Alternativamente, puedes lograr lo mismo sin jQuery usando el siguiente código. (Gracias @Niet)

document.getElementById(''textarea'').onkeyup = function () {
  document.getElementById(''count'').innerHTML = "Characters left: " + (500 - this.value.length);
};

Answer 10

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

Está llamando a textareaLengthCheck y luego está asignando su valor de retorno al detector de eventos. Es por esto que no se actualiza ni hace nada después de cargar. Prueba esto:

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

Aparte de eso:

var length = textarea.length;

textarea es el textarea real, no el valor. Intenta esto en su lugar:

var length = textarea.value.length;

Combinado con la sugerencia anterior, su función debe ser:

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