JavaScript动态获取input的maxLength实现字符计数问题排查

• 原代码中var maxLen = document.getElementsByClassName("handlerWorld").maxLength;写法存在本质错误：getElementsByClassName返回的是匹配所有元素的集合，不是单个DOM元素，直接访问属性会得到undefined。且页面中不同输入框的maxlength值不同（分别为140、100），全局定义单个maxLen变量无法适配多个输入框的不同限制。
• 后续单独给.maxchar赋值最大长度的逻辑，依赖的全局maxLen本身就是无效值，且没有和对应输入框做关联，自然无法得到正确结果。

function countChar(jqObj) {
    // 读取当前操作输入框自身的maxlength属性，转数字避免类型计算异常
    const maxLen = Number(jqObj.attr('maxlength'));
    let currentLen = jqObj.val().length;

    // 超出最大长度时自动截断内容
    if (currentLen > maxLen) {
        currentLen = maxLen;
        jqObj.val(jqObj.val().slice(0, maxLen));
    }

    // 按要求渲染「已输入字符数/最大允许字符数」格式
    jqObj.prev('label').find('span.chars-twenty').text(`${currentLen}/${maxLen}`);
}

$(document).ready(function () {
    $("[class*='handlerWorld']")
        // 同时绑定input和keyup事件，兼容粘贴、剪切、输入法输入等场景，计数更准确
        .on('input keyup', function () {
            countChar($(this));
        })
        .each(function () {
            // 页面加载完成就初始化计数展示
            countChar($(this));
        });
});

• 移除全局无效的maxLen变量，每次触发计数时，针对当前操作的输入框读取自身的maxlength属性值，适配页面上多个输入框不同长度限制的场景。
• 新增input事件绑定，解决仅绑定keyup时无法捕获鼠标粘贴、右键剪切、中文输入法联想输入等场景的问题，计数实时性和准确性更高。
• 计数渲染逻辑直接拼接成要求的x/y格式，不需要额外编写单独给最大字符数赋值的代码，页面初始化、用户输入时都会自动展示正确的数值。

如果需要单独固定展示最大字符数的位置（比如你之前用到的span.maxchar元素），可以直接在初始化遍历输入框的逻辑里补充对应赋值即可，不需要单独写全局查询逻辑。

内容的提问来源于stack exchange，提问作者widelink