11

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

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

4

4 回答 4

1

如果您希望您的函数在字段中的文本更改时触发，您可以将其绑定到inputandpropertychange事件，按照这个答案：

像这样：

$('#descrip').on('input propertychange', function(e){

这将确保您的代码在例如用户使用鼠标粘贴内容时触发。

至于阻止他们输入超出限制的内容，我认为您必须跟踪他们自己输入的内容，然后在违反您的标准时恢复他们的上次编辑。

请注意，例如，如果用户超过限制，Twitter 不会阻止用户输入更多字符——他们只是告诉用户他们超过了限制，并在他们回到限制时告诉他们。这可能是最实用的设计。

于 2013-09-16T13:57:44.607 回答
1

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

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

这将在您键入时起作用，并且如果您粘贴文本块。不过，大文本块可能需要更长的时间才能循环播放。在这种情况下，您可能希望在 "\n" 上拆分并首先删除行，然后是字符。

jsfiddle

于 2013-09-11T14:03:34.147 回答
0

你可以试试这个：

$('#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 来捕获文本。仍然有一些粗糙的边缘（即，如果您选择文本并按退格键，它不会更新）。

尽管如此，Spudley 的评论仍有一些有效的观点，您可能需要考虑这些观点。

编辑：

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

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

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

但是，如果要在粘贴后剪掉文本以便忽略不合适的文本，但允许粘贴的其余文本，则需要一种完全不同的方法。您可以尝试迭代文本，直到找到多少新文本就足够了。

顺便说一句，换行符似乎会导致您的原始脚本行为怪异。

于 2013-08-28T15:42:40.170 回答
0

我已经能够让程序正常工作：

var over = false;
var num = 0;
var valid_entry = "";
$('#descrip').keyup(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    getMaxRow(t,key,this);
});

function getMaxRow(t,key,obj) {
    jQuery('<div/>', {
            "class": "hide",
            text: t,
            id: "test"
        }).appendTo('body');
        var h = $('#test').height();
        $('#test').remove();
        if(h >= 100){
            num += 1;
            if(num == 1){
                var div = '<div id="message">You have run out of room</div>'
                $('body').append(div);
            }
            over = true;
        }
        else{
            over = false;
            valid_entry = t;
            if(num >= 1){
                $('#message').remove();
                num = 0;
            }
        }

        if( over ) {
            //Do this for copy and paste event:
            while ( over ) {
                 //Try using a substring here
                 t = t.substr(0,(t.length-1));
                 over = getMaxRow(t,key,obj);
            }
        }

        $(obj).val(valid_entry);

        return over;
}
于 2013-09-16T13:52:06.357 回答