javascript - 限制 contenteditable div 高度

Question

div 限制最大高度为300px，当我输入一些文字时，div 达到300px 后文字溢出。如何在div 达到300px 时停止文字输入。

我使用溢出:隐藏；这只是停止溢出，但仍然可以输入文本。

.editable {
overflow:hidden;
max-height:300px;
border: 1px solid #eee;
padding: 5px;
border: 1px solid #000;
outline: none;
width: 300px;
min-height: 40px;
} 

http://jsfiddle.net/zFzQe/77/

有没有办法测量文本高度并将文本输入限制为 300 像素？

Answer 1

试试这个代码，Demo

$("editable").addEvent('keypress', function (e) {
    var element = this;
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
        e.stop();
    }
});