多個動態輸入字符限制

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