Question

div被限制为最大高度为300px，当我输入一些文本时，div达到300px文本overflows.how以在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/

有没有办法测量文字高度并将文字输入限制为300px？

3 个答案:

答案 0 :(得分：1)

答案 1 :(得分：1)

答案 2 :(得分：0)

Answer 1

editable.onkeyup=function(){
  if(editable.innerHeight>='300px'){
    editable.style.height='300px';
  }
}

Answer 2

试试此代码Demo

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

Answer 3

我显然回答这个问题很晚，但是在一个非常相似的问题上苦苦挣扎。这是我在查看几个示例后得出的结果：（拒绝投票的人，请保持友善）

<div contenteditable='true' id="message_area" max-width: 100px;' >
</div>
<script type='text/javascript'>
jQuery("div#message_area").on('keypress', () => {
   if ( event.target.innerText.trim().length >= 10 ) {
      event.preventDefault();
      return false;
   }
});
</script>

限制contenteditable div高度

3 个答案: