Tengo un contador de "caracteres restantes" para mi tienda Shopify que muestra cuántos caracteres le quedan a un cliente para ingresar en un cuadro de texto. Funciona perfectamente cuando tengo un cuadro de texto en la página, pero si hay dos o más, el texto de cuenta regresiva no se muestra en absoluto. ¿Alguna idea sobre cómo hacer que esto se ejecute varias veces en la misma página?
$(document).ready(function() { var text_max = $('#line_item_text').attr('maxlength'); $('#personalization_feedback').html(text_max + ' characters remaining '); $('#line_item_text').keyup(function() { var text_length = $('#line_item_text').val().length; var text_remaining = text_max - text_length; $('#personalization_feedback').html(text_remaining + ' characters remaining '); }); });En lugar de usar id en elementos HTML, necesita usar clases porque la misma identificación no se permite más de una vez en un documento HTML, si la agrega, entonces no funciona.
Así que usa clases y repite el código sobre cada elemento como si agregaras usando id.
$(document).ready(function() { $('.line_item_text').each(function(idex,ele){ var text_max = $(ele).attr('maxlength'); $(ele).next().html(text_max + ' characters remaining '); $(ele).keyup(function() { var text_length = $(ele).val().length; var text_remaining = text_max - text_length; $(ele).next().html(text_remaining + ' characters remaining '); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea maxlength="50" class="line_item_text"></textarea> <div id="txt1"></div> <textarea maxlength="50" class="line_item_text"></textarea> <div id="txt2"></div>