Question

我在页面上使用了contenteditable。当用户聚焦div时，高度设置为js。（需要显示对此问题不感兴趣的按钮）如果用户键入大量文本，以便推送多行，则它会溢出框并隐藏。如何检测何时添加或删除其他行？谢谢！

<小时/> HTML：<div id="edit" contenteditable="true">I can be edited.</div>

jQuery的：

$("#edit").focus(function(){
    t=$(this);
    t.css('height',t.height()+10);
}).blur(function(){
    $(this).css('height','');  
});

演示：http://jsfiddle.net/f8D4b/

Answer 1

尝试此方法，将高度设置为“auto”以覆盖css设置，然后在每个keyup事件（demo）后设置高度：

$("#edit").on('focus keyup', function () {
    var t = $(this);
    t.css('height', 'auto');
    t.css('height', t.height() + 10);
}).on('blur', function () {
    $(this).css('height', '');
});

Answer 2

您不需要检测何时添加或删除其他行，您只需要修改以下代码。

$("#edit").focus(function(){
    t=$(this);
    t.css('min-height',t.height()+10);
}).blur(function(){
  $(this).css('min-height','');  
});

检查更新fiddle

检测contenteditable div何时有多行文本

2 个答案: