按高度禁用textarea而不是字符

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();
});

我从这里得到了限制代码(我的"代码在这里"评论),它几乎可以工作.

只有一个问题:

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

我该如何解决这个问题？

的jsfiddle

Answer 1

你可以试试这个：

$('#descrip').bind('paste',function(e) { 
    var el = $(this);
    setTimeout(function() {
        //Get text after pasting
        var text = $(el).val();
        //wath yu want to do
    }, 100);
};

杰斯小提琴

解决方案取自此处和此处。它通过绑定到粘贴事件来工作。由于粘贴事件是在粘贴文本之前触发的，因此您需要使用 setTimeout 来捕获粘贴后的文本。仍然存在一些粗糙的边缘（即，如果您选择文本并按退格键，它不会更新）。

尽管如此，斯普德利的评论还是有一些正确的观点，你可能需要考虑一下。

编辑：

关于 jsfiddle 的注意事项：它允许您在粘贴时超出限制，但是一旦超出限制，您就无法粘贴（或键入）更多文本，直到再次低于限制。

必须考虑到，由于您通过渲染后占用的大小来限制文本长度（正如 Spudley 指出的那样，它有自己的问题），而不是定义的长度，因此您可以知道文本是否适合，但是不知道文本中有多少内容在限制之内，有多少内容超出限制。

如果粘贴的文本使输入超出限制，您可以考虑将文本框值重置为其先前的值，就像在这个中一样。

但是，为了在粘贴后剪切文本，以便省略不合适的文本，但允许粘贴文本的其余部分，您需要一种完全不同的方法。您可以尝试迭代文本，直到发现新文本的数量足够。

顺便说一句，换行似乎会导致您的原始脚本表现得很奇怪。