Tengo un formulario en mi sitio web con varias áreas de texto diferentes.
HTML/PHP
foreach ($bla as $blabla) { .... other php-code (not relevant) .... echo '<textarea id="textarea['.$blabla["ID"].']" name="textarea" maxlength="1000" onKeyUp="countChars(\'textarea['.$blabla["ID"].']\',\'count\',\'{CHAR}\',1000);""></textarea>'; echo '<span id="counter">1000</span>'; }JS:
function countChars(entrance, exit, text, characters) { var entranceObj = document.getElementById(entrance); var exitObj = document.getElementById(exit); var length = characters - idObj.value.length; if (length <= 0) { length = 0; text = '<span class="disable" style="color: red;">' + text + '</span>'; entranceObj.value = entranceObj.value.substr(0, characters); } else if (length <= 20) { text = '<span style="color: red">' + text + '</span>'; } exitObj.innerHTML = text.replace("{CHAR}", length); }Este código funciona. Sin embargo, el contador solo funciona para un área de texto. ¿Alguna idea de por qué no funciona en todos?
Debe proporcionar identificadores únicos para cada área de texto y tramo de contador. Aquí está su código PHP modificado para que coincida (usando delimitadores de cadena heredoc para que sea más legible):
foreach ($bla as $key => $blabla) { echo <<<BLA <textarea id="textarea_{$key}" name="textarea_{$key}" maxlength="1000" onKeyUp="countChars('{$key}','{CHAR}',1000);""></textarea> <span id="counter_{$key}">1000</span> BLA; } Si las claves en su matriz no se pueden usar como se indicó anteriormente, agregue una variable de contador que incremente en cada iteración y utilícela como la clave. Notará una diferencia en la llamada a la función countChars , donde solo pasamos la clave, o la parte única de textarea_ y counter_ a su función Javascript.
Luego, la función Javascript se modifica para que coincida:
function countChars(itemId, text, characters) { var entranceObj = document.getElementById('textarea_'+itemId); var exitObj = document.getElementById('counter_'+itemId); // ... }Generamos los ID reales tanto para el área de texto como para el contador sobre la base del bit único. Ahora, también podría pasar los ID completos en dos argumentos, pero básicamente es un volumen redundante. Es más limpio mantener las firmas de funciones al mínimo y regenerar patrones como este.