Question

jQuery ( function ( $ ) {   

var textarea = $('.project');
var $counter = $('.chars');

var limit = 200;
var initial = 0;

$(textarea).on('keypress keyup copy paste', function(){
    displayLength();
});


function displayLength() {
     var thisChars = textarea.val().replace(/(\r\n|\n|\r)/g, '').length; 
    if (thisChars > limit) {
        $counter.text(thisChars + ' of 200 chars');
        var CharsToDel = (thisChars-totalChars); 
        textarea.value = textarea.value.substring(0,textarea.value.length-CharsToDel);

    } else {
        $counter.text(initial + thisChars + ' of 200 chars');

    }
}

displayLength();

});

场景是当我在创建页面上时，它将显示200个字符中的0个。然后在文本框中键入时，它将显示增加的字符。此外，它不会计算新的行或空格。因此，当保存创建的页面时，它仍将显示新页面上的字符数，即编辑。问题是控制台显示错误'无法调用方法'替换'未定义。

非常感谢帮助！

Answer 1

为什么在将HTML内置到HTML规范中时，根本使用JS来限制长度？

<textarea class="project" maxlength="200"></textarea>

如果您选择保留JS限制功能，则需要将其更改为以下内容：

$(textarea).on('keypress keyup copy paste', function(e){
    displayLength(e);
});


function displayLength(e) {
     var thisChars = textarea.val().replace(/(\r\n|\n|\r)/g, '').length;

     if (thisChars === limit)
         e.preventDefault();
}

不确定e.preventDefault对复制/粘贴事件的效果如何。

Answer 2

$('anything that is not on the page').val()是undefined，没有replace方法。要在DOM完成加载.project textarea之前暂时避免此错误，请考虑使用$(document).ready，或者将undefined与''交换为特殊情况：

var thisChars = (textarea.val() || '').replace(/(\r\n|\n|\r)/g, '').length;  // laziest solution

更合适的解决方案应检查textarea是否可用于该函数：

function displayLength() {
    if (textarea.val() === undefined) {
        return;  // do not run any further.
    }
    var thisChars = textarea.val().replace(/(\r\n|\n|\r)/g, '').length; 
    if (thisChars > limit) {
        $counter.text(thisChars + ' of 200 chars');
        var CharsToDel = (thisChars-totalChars); 
        textarea.value = textarea.value.substring(0,textarea.value.length-CharsToDel);

    } else {
        $counter.text(initial + thisChars + ' of 200 chars');

    }
}

在函数内部不能使用replace方法

2 个答案: