javascript - 按高度而不是字符禁用文本区域

Question

很多时候我们想限制用户可以写多少，但这里我有一个特殊大小的盒子，它必须适合，所以我想在超过特定高度时禁止添加更多字符。这是我所做的:

var over;
$('textarea').keypress(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    jQuery('<div/>', {
        style: "visibility:hidden",
        text: t,
        id: "test"
    }).appendTo('body');
    var h = $('#test').height();
    if(h >= 100){
        over = true;
    }
    else{
        over = false;
    }
    if(over){
        //code goes here
    }
    $('#test').remove();
});

我从 here 得到了限制代码(我有“代码在这里”注释的地方)它几乎有效。

只有一个问题:

如果有人复制和粘贴，它可以放置多个字符，因此仍然超出限制。

我该如何解决这个问题？

jsfiddle

Answer 1

另一个有点棘手的解决方案可能是在向上键时检查滚动。如果存在滚动，则删除滚动存在时的最后一个字符:

function restrictScroll(e){
    if(e.target.clientHeight<e.target.scrollHeight){
        while(e.target.clientHeight<e.target.scrollHeight){
            e.target.value = e.target.value.substring(0, e.target.value.length-1);
        }
    }
};
document.getElementById("textareaid").addEventListener('keyup', restrictScroll);

这将在您键入和粘贴文本 block 时起作用。大文本 block 可能需要更长的时间来循环。在这种情况下，您可能希望拆分“\n”并先删除行，然后删除字符。

jsfiddle