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

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

当用户键入时，我需要javascript捕获resize并在需要时将类附加到元素

我设法让盒子向上调整大小，但我有很多麻烦再次缩小它

我已经被困在这几天了，所以现在任何帮助都将不胜感激

我这里有这个函数和一个基本的UI版本

它可能真的很简单，但我没有运气弄明白这一点

var chatBoxSize={
旧高度：0，
滚动高度：0，
最后一班：1，
班级：1，
maxClass:5，
最小高度：0，
最后尺寸：0，
getClass:函数（大小）{
变量大小=[chatBoxSize.min_height，chatBoxSize.min_height*2，chatBoxSize.min_height*3，chatBoxSize.min_height*4，chatBoxSize.min_height*5]；
开关（大小）{case size[0]：返回1；中断；case size[1]：返回2；中断；case size[2]：返回3；中断；case size[3]：返回4；中断；case size[4]：返回5；中断；}；
//不准确
var r=null；
控制台日志（大小）；
对于（变量x=0；x=尺寸[x]&尺寸<尺寸[（x+1）]）{
返回（x+1）；
}
}
}
返回chatBoxSize.maxClass；
}
};
$（函数（）{
chatBoxSize.min_height=parseInt（$（'msgWriteArea'）.height（）；
chatBoxSize.max_height=chatBoxSize.min_height*4；
chatBoxSize.last\u size=chatBoxSize.min\u高度；
});
函数updateChatSize（）{
变量id='#msgWriteArea'；
var元素=document.querySelector（id）；
变量大小=$（id）[0]；
var container=$（'.container'）；
var toRemove='size_'+chatBoxSize.lastClass；
log（chatBoxSize.getClass（size））；
chatBoxSize.lastClass=chatBoxSize.getClass（大小）；
log（'addnewclass'，chatBoxSize.lastclast）；
chatBoxSize.last_size=大小；
$（id）.removeClass（toRemove）；
$（id）.addClass（'size_'+chatBoxSize.lastClass）；
容器。removeClass（toRemove）；
container.addClass（'size_u'+chatBoxSize.lastClass）；
$（'#display'）.val（'Removed'+toRemove+'Added'+chatBoxSize.lastClass）；
};
$（函数（）{
$（'#msgWriteArea'）.bind（'change keydown input'，function（）{
如果（event.type=='keydown'）{
updateChatSize（）；
}
});
})

---

我曾想过只将高度设置为“自动”，但这对其他ui元素不起作用。

很抱歉，但是根本不需要JS

flex

救援，

overflow-y:auto和可编辑DIV的最大高度

这里有一个，您可以播放并调整浏览器大小


*{框大小：边框框；-webkit框大小：边框框；}
html，正文{高度：100%；边距：0；字体：16px/1无衬线；颜色：#444；}
#聊天{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
#信息{
弹性：1；
溢出y：自动；
}
#消息>div{
填充：24px；
背景：#eef；
保证金：4px0；
}
#用户界面{
背景：#eee；
}
#msgWriteArea{
填充：24px；
溢出y：自动；
身高：100%；
背景：ddd；
最大高度：100px；/*如果超过最大高度*/
overflow-y:auto；/*添加滚动条*/
}

信息1
信息2
信息3
信息4
信息5
信息6
一些短信
（主题外）根据可编辑高度改变颜色的聊天是什么类型的？。。。我确信（了解完整的设计）其他UI元素的调整将是微不足道的……您正在过度复杂化整个代码，从
$（'#msgWriteArea'）开始。bind（'change keydown input'，function（）{
->它可以简单地作为
$（'#msgWriteArea'）。on（'input'，updateChatSize）
它不改变颜色我在小提琴中用它来显示类的变化，用on代替bind它更干净，但大小仍然没有减少所以问题是…你需要根据行数或确切的元素高度来改变类吗（因为“高度”这个词在实际情况下没有多大意义：\）线条可能更好，我不知道你测量线条这就是为什么我使用高度这绝对是一种更简单的方法，flex与ie@PaulLedger如果您在
flex
支持方面遇到问题，则始终可以对第一个子元素容器使用
display:table
和
table cell
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();
        }
    });
})