Question

请告诉我如何在jQuery中阻止或停止增加textarea的大小？

我做了一个演示，其中用户只按8进入和700字符，但是当用户先按7进入然后开始写文本时，我的逻辑失败。它出现在下一行，尺寸开始增加。当用户输入文本时，我想停止增加该div的大小。换句话说，如果用户输入高度，则不会增加大小并停止写入。

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

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

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

此外，用户还可以拖放文本。这意味着.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

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

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

此外，将事件从按键更改为键盘并更改条件，如下所示

if (text.length >= 700)

Demo

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

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

希望这有帮助。

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

5 个答案: