mejorar a funcion generica-reusable

[catpaw]

hola,

tengo esta funcion, que me ayuda a delimitar la introduccion de texto a un textarea:

Código Javascript:

//entre el document ready
$('#numero').html('240');
$('#motivo,#observaciones,#descripcion_area').keyup(function() {
    var total_letras = 200;
    var longitud = $(this).val().length;
    var resto = total_letras-longitud;
    $('#numero').html(resto);
    if(resto<=0){
                   var str= $('#motivo,#observaciones,#descripcion_area').val();
        str = str.substr(0,total_letras);
        $('#motivo,#observaciones,#descripcion_area').val(str);
        $('#numero').html('0');
    }
});
 

Funciona bien cuando en un formulario solo tengo un textarea, por el ejemplo:

formulario1.php => contiene solo el texarea id=motivo

en el html:

Código HTML:

<textarea name="motivo" id="motivo" rows="4" cols="45"></textarea><div>Letras Restantes: <span id="numero">
 

pero si yo quisiera:

formulario1.php => texarea id=motivo y texarea id=observaciones

en el html:

Código HTML:

<textarea name="motivo" id="motivo" rows="4" cols="45"></textarea><div>Letras Restantes: <span id="numero">
<textarea name="observaciones" id="observaciones" rows="4" cols="45"></textarea><div>Letras Restantes: <span id="numero">
 

la funcion solo trabaja en textarea id=motivo

como la podria adaptar para que me tome en cuenta los 2 o mas textareas en el mismo script.

obviamente hay que diferenciar de alguna manera span el id=numero

gracias

[diurno10]

Yo lo haría de esta manera

Código:

entre el document ready
$('#numero').html('240');
$('textarea,#descripcion_area').keyup(function() {
    var total_letras = 200;
    var longitud = $(this).val().length;
    var resto = total_letras-longitud;
    $('#numero').html(resto);
    if(resto<=0){
                   var str= $(this).val();
        str = str.substr(0,total_letras);

        $(this).val(str);
        $('#numero').html('0');
    }
});

[catpaw]

hola diurno10, gracias por tu tiempo

oye mira no entiedo muy bien las adaptaciones:

aqui porque pones textarea en lugar de todos los identificadores? no entiendo la idea

$('textarea,#descripcion_area').keyup(function() {

y falta considerar que para mostrar cuantos caracteres restan cada span deberia tener un identificador distinto pero en la funcion solo lo manejo con un selector

$('#numero')

no se si se podria hacer algo como:

this span y seleccionarlo por una clase o algo asi

para que a cada textarea le indique con su respectivo span cuantos caracteres le restan

[catpaw]

ya me muestra en cada textarea letras restantes, solo que el segundo textarea va restando y tomando el valor de restante del primer textarea

Código Javascript:

$('.numero').html('200');
$('#motivo,#observaciones,#descripcion_area').keyup(function(){
    var total_letras = 200;
    var longitud = $(this).val().length;
    var resto = total_letras-longitud;
    $('.numero',this).html(resto);
    if(resto<=0){
        var str= $(this).val();
        str = str.substr(0,total_letras);
        $(this).val(str);
        $('.numero').html('0');
    }
});
 

cambie los span, en lugar de id les puse clase, pero aun no logro diferenciarlos,
trate de poner:

Código HTML:

<textarea name="descripcion_area" id="descripcion_area" rows="4" cols="45"></textarea><div>Letras Restantes: <span class="numero"></span></div>
<textarea name="motivo" id="motivo" rows="4" cols="45"></textarea><div>Letras Restantes: <span class="numero"></span></div>
 

$('.numero',this).html('200');

y hay no calcula los caracteres restantes