編集可能な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(); 
     } 
    }); 
}) 

私はこれを考え出す運を持っていないのです高さをautoに設定することを考えましたが、それは残りのUI要素では機能しません。

Answer 1

言って申し訳ありませんが、ませJSが編集可能なDIVにすべての救助に
flex、overflow-y: auto;とmax-heightで必要：

相続人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を使用してと数えることができます。