Question

我有一个表单，用户可以动态添加输入。输入字符长度的总和不应该高于500，我不能以正确的方式摆脱它。

目前的javascript代码如下所示：

 $('.group[data-maxchar] .add-item-input').on('keyup paste', function () {
    var group = $(this).closest('.group[data-maxchar]');
    var maxChar = parseInt($(this).closest('.group[data-maxchar]').attr('data-maxchar'));
    var remainingChar = parseInt(group.find('.counter').text());
    var str = $(this).val();
    var length = str.length;

    if (remainingChar < 1) {
        $(this).val(str.substr(0, maxChar));
    }

    updateCounters(group);
});

在添加第一个输入后，我可以正确插入500个字符然后如果我尝试粘贴ot键入更多文本则会停止并且我不会超过它。

不幸的是，如果我添加更多输入，我会看到计数器变为负数，并且我能够写入文本......

我很确定错误出现在控件的这一部分：

if (remainingChar < 1) {
    $(this).val(str.substr(0, maxChar)); //here
}

我该如何解决？

Answer 1

主要问题是on事件。查看jquery api

正确使用是$('.group[data-maxchar]').on('keypress paste', '.add-item-input', function () {。然后将为组中的每个元素触发函数。

也可以使用keypress代替keyup，因为您只想处理可打印的字符。

See demo

多个动态输入字符限制

1 个答案: