使用可编辑的 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 计算行数。

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

Use editable div height change to add and remove classes to other DOM elements

html

javascript

css

jquery

contenteditable

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

Use editable div height change to add and remove classes to other DOM elements

html

javascript

css

jquery

contenteditable

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