如何防止或停止在jQuery中增加文本区域的大小

how to prevent or stop increasing the size of textarea in jQuery?

本文关键字：文本 增加 区域 jQuery 何防止      更新时间：2023-09-26

你能告诉我如何防止或停止在jQuery中增加文本区域的大小吗？

我做了一个演示，用户只按8回车和700个字符，但当用户第一次按7回车然后开始写文本时，我的逻辑失败了。它出现在下一行，大小开始增加。当用户输入文本时，我想停止增加div的大小。换言之，如果用户输入到一定高度，它将不会增加大小并停止书写。

http://jsfiddle.net/4WKgQ/1/

$(function() {
    var enterCounter = 0;
    var charCounter = 0;
    $(".myDiv").keypress(function(event) {
        var text = $(".myDiv").text();
        if(text.length == 700) {
            alert("Too many characters");
            $(".myDiv").text($(this).text().substr(0, 700));
        };
        if(event.keyCode == 13) {
            enterCounter += 1;
        };
        if(event.keyCode == 13 && enterCounter >=8) {
            event.preventDefault();
        };
    });
});

感谢

您需要检查

if (text.length >= 700)

而不是

if (text.length == 700)

因为在复制/粘贴第一种情况下，很可能会失败

您可以将onContextMenu="return false;"属性添加到div中，以避免鼠标右键单击复制/粘贴。

此外，用户还有机会拖放文本。这意味着.keypress是不够的。

更改css

.notes {
    width: 369px;
    min-height: 152px;
    color: black;
    border:1px solid red;
    border-radius: 12px;
    overflow-x: hidden; //prevent auto scroll the width
    overflow-y: auto; // This will auto scroll when content grows
    height: 200px;  //Add some height
}

http://jsfiddle.net/4WKgQ/4/

试试这个，

$(function () {
    var enterCounter = 0;
    var charCounter = 0;
    var totalCharsLimit=70;
    $(".myDiv").on('keypress',function (event) {
        var text = $(this).text();
        if (text.length >= totalCharsLimit) {
            //console.log("Too much characters");
            $(this).text(text.substr(0, totalCharsLimit));
        };
        if(event.keyCode == 8 || event.keyCode == 46) return true;
        if (event.keyCode == 13) {
            enterCounter += 1;
        };
        if (event.keyCode == 13 && enterCounter >= 8) {
            event.preventDefault();
        };
    }).on('DOMSubtreeModified',function (event) {
        var text = $(this).text();
        if (text.length >= totalCharsLimit) {
            console.log('Limit exceeds');
            return false;
        }                
    });
});

演示

您需要在css中添加以下内容以防止文本区域高度更改-

.notes{ height:152px; overflow:auto;}

此外，将事件从按键更改为向上键，并按以下更改条件

if (text.length >= 700)

演示

问题#1-扩展高度问题：

将你的css更新为：

.notes {
    width: 369px;
    height: 152px;
    overflow: auto;
    color: black;
    border:1px solid red;
    border-radius: 12px;
    resize: none;
}

请注意固定的height和添加的overflow。

问题#2-复制粘贴场景：

刚刚添加了这个功能来检查复制粘贴场景，通过在一点超时后获取文本：

$(".myDiv").bind('paste', function (e) {
    var elem = $(this);
    setTimeout(function () {
        var text = elem.text();
        if (text.length >= 100) {
            alert("More than 100 characters, trimming...");
            elem.text(text.substr(0, 100));
        };
    }, 100);
});

您的其余代码运行良好。刚刚将条件更改为text.length >= x。

再次检查小提琴：http://jsfiddle.net/4WKgQ/8/

希望能有所帮助。

编辑：（在Op澄清实际需求后）

好的，现在你已经澄清了你的实际要求，这只是为了防止用户在到达框的末尾时继续打字。如果我是对的，那么你不必做所有这些。只需不断检查框的滚动高度与高度。一旦超过高度，就意味着使用者已经到达终点。然后你可以采取回避行动。

这是小提琴样本：http://jsfiddle.net/abhitalks/c2PKY/

HTML:

<div contenteditable="true" id="txt"></div>

CSS:

#txt {
    width: 400px; height: 100px;
    overflow-x: none;
    overflow-y: scroll;
    color: black; border: 1px solid gray;
    resize: none;
}

JS：

var high = $("#txt").height();
$("#txt").on("keyup", function(e) {
    var content = $(this).text(), 
        contentLength = content.length, 
        scrolled = $(this).get(0).scrollHeight;
    $("#note").text(scrolled + ' / ' + high);
    if (scrolled > high) {
        $("#note").text("Exceeded, trimming...");
        $(this).text(content.substr(0, contentLength - 2));
    }
});

希望这能有所帮助。

相关文章：