Limit contenteditable div height

Question

div is limited to a maximum height of 300px , when I input some text, after div reaches 300px text overflows.how to stop text input when div reaches 300px.

I used overflow:hidden; which just stops overflow, but text can still be inputted.

.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/

Is there a way to measure text height and limit text input to 300px ?

Answer 1

Try this code, Demo

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