如何防止或停止增加 jQuery 中 textarea 的大小？

Question

您能告诉我如何防止或停止增加 jQuery 中 textarea 的大小吗？

我做了一个演示，其中用户只按 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();
        };
    });
});

谢谢

Answer 1

你需要检查

if (text.length >= 700)

而不是

if (text.length == 700)

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

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

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

Answer 2

改变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/

Answer 3

试试这个，

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

Demo

Answer 4

您需要在 css 中添加以下内容以防止 textarea 高度变化-

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

另外，将事件从 keypress 更改为 keyup 并更改条件如下

if (text.length >= 700)

Demo

Answer 5

问题 #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));
    }
});

希望这会有所帮助。