textarea循环限制每个输入框最多20000字输入

textarea循环限制每个输入框最多20000字输入

html

<div class="textareaGroupList">
       <div class="chooseList mustTextareaLi">
           <textarea maxlength="20000" idname="info" name="" id="answerTextarea1" cols="30" rows="10"></textarea>
           <span class="textNum" id="textareaLimit1">0/20000</span>
       </div>
       <div class="chooseList mustTextareaLi">
           <textarea maxlength="20000" idname="cac" name="" id="answerTextarea2" cols="30" rows="10"></textarea>
           <span class="textNum" id="textareaLimit2">0/20000</span>
       </div>
       <div class="chooseList mustTextareaLi">
           <textarea maxlength="20000" idname="cp" name="" id="answerTextarea3" cols="30" rows="10"></textarea>
           <span class="textNum" id="textareaLimit3">0/20000</span>
       </div>
       <div class="chooseList mustTextareaLi">
           <textarea maxlength="20000" idname="cc" name="" id="answerTextarea4" cols="30" rows="10"></textarea>
           <span class="textNum" id="textareaLimit4">0/20000</span>
       </div>
       <div class="chooseList mustTextareaLi">
           <textarea maxlength="20000" idname="cd" name="" id="answerTextarea5" cols="30" rows="10"></textarea>
           <span class="textNum" id="textareaLimit5">0/20000</span>
       </div>
</div>

css

.chooseList{
     display: flex;
     position: relative;
 }
 .chooseList .textNum{
     position: absolute;
     bottom: 2px;
     right: 10px;
     font-size: 14px;
     color: #333;
     background: #fff;
 }

js

// 监听每个textarea右下角的取值 取值
function setupTextareaListener(textareaId, maxCharCount) {
    // console.log(textareaId,maxCharCount);
    const textarea = document.getElementById(`answerTextarea${textareaId}`);
    const charLimitElement = document.getElementById(`textareaLimit${textareaId}`);
    function updateCharLimit() {
        const charCount = textarea.value.length;
    
        charLimitElement.textContent = `${charCount} / ${maxCharCount}`;
    }
    textarea.addEventListener('input', updateCharLimit);
    updateCharLimit();
}
// 使用循环动态设置监听器
console.log($('textarea'));
const textareaCount = $('textarea').length; // 要设置的 textarea 数量
console.log(textareaCount);
for (let i = 1; i <= textareaCount; i++) {
    var s = i;
    console.log(s);
    setupTextareaListener(s, 20000); // 最大字符数100
}