多输入框限制3字符失效问题求助（JS+HTML场景）

安全阿岳

2026-5-14

解决多个输入框字符长度限制失效的问题

我一眼就看出问题出在哪啦——你的代码里把所有带.max-length_3类的输入框都存在inputPL变量里，但在keyup事件处理函数中，你直接操作的是整个jQuery集合，而不是当前正在输入的那个输入框！这就导致只有第一个输入框会被处理，其他的完全没被限制。

具体错误点拆解：

inputPL.val.length：jQuery对象没有.val属性，得用.val()方法获取值；而且直接调用inputPL.val()只会拿到集合中第一个元素的值，其他输入框的内容根本没被读取。
inputPL.val = ...：jQuery设置输入框值要用.val(newValue)方法，不是直接赋值；同时你操作的是整个元素集合，自然只会修改第一个输入框的内容。

修正后的代码：

personaliseShirt.plInitials = function () {
    console.log('pressed');
    // 给每个带max-length_3类的输入框绑定keyup事件
    $('.max-length_3').on('keyup', function () {
        const maxLength = 3;
        // 用$(this)精准获取当前触发事件的输入框
        const $currentInput = $(this);
        let inputValue = $currentInput.val();
        
        // 处理超过长度的情况，同时转大写（匹配你HTML里的转大写需求）
        if (inputValue.length > maxLength) {
            inputValue = inputValue.substring(0, maxLength).toUpperCase();
            $currentInput.val(inputValue);
        }
    });
}