javascript - 多种动态输入字符限制

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 个字符，然后如果我尝试粘贴或键入更多文本，它会停止并且我不会超过它。

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

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

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