使用可编辑的 div 高度更改向其他 DOM 元素添加和删除类

Question

我有一个允许用户输入文本的可编辑 div。这是聊天小部件的一部分，因此设计需要将框固定在底部。

当用户键入时，我需要 javascript 来捕捉调整大小并将类附加到需要的元素。

我设法让盒子向上调整大小，但我在再次缩小它时遇到了很多麻烦。

我已经坚持了好几天了，所以现在任何帮助都将不胜感激。

我这里有函数和基本UI版本JSFiddle

它可能真的很简单，但我没有运气弄清楚这个

JSFiddle

var chatBoxSize = {
    oldHeight : 0,
    scrollHeight : 0,
    lastClass : 1,
    minClass : 1,
    maxClass : 5,
    min_height : 0,
    last_size : 0,
    getClass : function (size){
        var sizes = [chatBoxSize.min_height, chatBoxSize.min_height * 2, chatBoxSize.min_height * 3, chatBoxSize.min_height * 4, chatBoxSize.min_height * 5];
        switch (size){ case sizes[0] : return 1; break; case sizes[1] : return 2; break; case sizes[2] : return 3; break; case sizes[3] : return 4; break; case sizes[4] : return 5; break; };
        //is not exact
        var r = null;
        console.log(size);
        for(var x = 0; x < sizes.length; x++){
            if(x < sizes.length){
                if(size >= sizes[x] && size < sizes[(x + 1)]){
                    return (x + 1);
                }
            }
        }
        return chatBoxSize.maxClass;
    }
};
$(function () {
    chatBoxSize.min_height = parseInt($('#msgWriteArea').height());
    chatBoxSize.max_height = chatBoxSize.min_height * 4;
    chatBoxSize.last_size = chatBoxSize.min_height;
});
function updateChatSize() {
    var id = '#msgWriteArea';
    var element = document.querySelector(id);
    var size = $(id)[0].scrollHeight;
    var container = $('.container');
    var toRemove = 'size_' + chatBoxSize.lastClass;
    console.log(chatBoxSize.getClass(size));
        chatBoxSize.lastClass = chatBoxSize.getClass(size);
        console.log('Add new class', chatBoxSize.lastClass);
        chatBoxSize.last_size = size;
        $(id).removeClass(toRemove);
        $(id).addClass('size_' + chatBoxSize.lastClass);
        container.removeClass(toRemove);
        container.addClass('size_' + chatBoxSize.lastClass);
        $('#display').val('Removed ' + toRemove + ' Added ' + chatBoxSize.lastClass);
};
$(function (){
    $('#msgWriteArea').bind('change keydown input', function () {
        if(event.type == 'keydown'){
            updateChatSize();
        }
    });
})

我曾想过将高度设置为自动，但这不适用于其余的 ui 元素。

Answer 1

很抱歉，但 根本不需要 JS
flex 救援，overflow-y: auto; 和 max-height 可编辑 DIV：

这是一个jsBin demo，这样您就可以播放和调整浏览器的大小

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;font:16px/1 sans-serif; color:#444;}


#chat{
  display: flex;
  flex-direction: column;
  height:100%;
}
#messages{
  flex:1;
  overflow-y: auto;
}
#messages > div{
  padding: 24px;
  background: #eef;
  margin: 4px 0;
}
#ui{
  background: #eee;
}
#msgWriteArea{
  padding: 24px;
  overflow-y: auto;
  height:100%;
  background:#ddd;
  max-height:100px;    /* if max height is exceeded */
  overflow-y: auto;    /* add scrollbars */
}

<div id="chat">
  <div id="messages">
    <div>Message 1</div>
    <div>Message 2</div>
    <div>Message 3</div>
    <div>Message 4</div>
    <div>Message 5</div>
    <div>Message 6</div>      
  </div>
  <div id="ui">
    <div id="msgWriteArea" contenteditable>Some text message</div>
  </div>
</div>

现在，如果您仍然确实需要消息区域的高度（由于某些原因），您可以使用 JS 计算行数。