Question

我有一个输入，用户可以在其中输入缩写。输入的最大长度为3。

我有以下js

    personaliseShirt.plInitials = function () {
        console.log('pressed');
        var inputPL = $('.max-length_3');

        $(inputPL).on('keyup', function () {
            var max = 3;
            console.log(inputPL.val.length);
            if (inputPL.val.length > max) {
                inputPL.val = inputPL.value.substring(0, max);
            }
        })
    }

我的问题是，第一个输入字段似乎阻止用户输入超过3个字符，但是如果用户有多个字符，则在第一次输入后，其余字符允许超过3个：/

用于输入字段的HTML

<input onkeyup="this.value = this.value.toUpperCase();" pattern="[A-Za-z]+" maxlength="3" type="text" class="form-control input-block-level defaultY? max-length_3" max="3" value="" placeholder="Enter Player Initials" name="player_2_9_6" id="player_2_9_6">

任何帮助或建议都很好

谢谢！

Answer 1

您的变量inputPL是一个包含多个元素的JQuery数组。在您的keyup处理程序中，检查此数组的长度，该长度不起作用。请改用this：

personaliseShirt.plInitials = function () {
    console.log('pressed');
    var inputPL = $('.max-length_3');

    $(inputPL).on('keyup', function () {
        var max = 3;
        var $thisElem = $(this);
        console.log($thisElem.val.length);
        if ($thisElem.val.length > max) {
            $thisElem.val = $thisElem.value.substring(0, max);
        }
    })
}

还请检查是否打算将val和value混合使用，或者是否需要使用val()。

Answer 2

它正在使用Firefox和Chrome。您可以将此功能重复使用。

$('input.testinput').on('keyup', function() {
    limitText(this, 3)
});

function limitText(field, maxChar){
    var ref = $(field),
        val = ref.val();
    if ( val.length >= maxChar ){
        ref.val(function() {
            console.log(val.substr(0, maxChar))
            return val.substr(0, maxChar);       
        });
    }
}

Demo

文字输入允许超过3个字符

2 个答案: