Question

我有一个div，其contenteditable=true。现在，如果我输入更长的文本，它会越过底部。我不希望这样。我希望文本停止并阻止任何其他文本。

这里的问题是这是textarea，而且我的可编辑div无效。

有什么想法吗？

Answer 1

归功于Mohsen，但我认为这篇文章应该有一个正式答案：你正在寻找css风格：

overflow:hidden;

关于div的问题。要使div可滚动，请将overflow设置为：

overflow:auto;

Answer 2

您可以保存div的状态（原始和每次成功输入后），输入事件后检查div大小，如果大小太大则恢复状态。

这个解决方案优于overflow:hidden;的优点是div实际上没有额外的内容。如果有人在输入太多后选择其中的所有文本，则额外的字符不会成为选择的一部分。

Answer 3

虽然这不是最优雅的方式，但确实有效。

HTML：

<div class="myDiv" contenteditable=true>This text is in the box.... but this is not in the box</div>

CSS：

.myDiv {
    background: #acacac;
    width:60px;
    height: 60px;
    overflow: hidden;
}

使用Javascript：

var text = undefined;
$(function(){
    while($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
        $('.myDiv').text($('.myDiv').text().slice(0,-1));
    }
});
$('.myDiv').bind('keydown', function(e) {
    text = $('.myDiv').text();
    if($('.myDiv').get(0).scrollHeight > $('.myDiv').height() && e.which != 8) {
        e.preventDefault();
    }
});
$('.myDiv').bind('keyup', function() {
    if($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
        $('.myDiv').text(text);
    }
 });

将可满足的div限制为可见部分

3 个答案: