HTML öğesi altta konumlandırılmayacak durumda

Mesajların gittiği bir kutu olan ve ileti kutusunun en altında bir metin giriş öğesi olan bir sohbet UI'si var. Başlangıçta iyi çalışıyor, ancak yeterli mesajlar belirdiğinde mesajlar ile birlikte metin giriş elemanı yukarı doğru kayar ve altta durmaz. Bunu nasıl yapabilirim? Herhangi bir yararlı düşünce takdir edilecektir. Bu sadece bastığınızda "chatmsgs içine yazdığınız metni görüntülemek için klavyenizdeki "Enter" diyorHTML öğesi altta konumlandırılmayacak durumda

İşte

#chatui { 
    z-index:3; 
    position:absolute; 
    bottom:5px; 
    width: 380px; 
    height: 150px; 
    border: 3px solid #8AC007; 
    margin-left:5px; 
    overflow:auto; 
    } 
#chatbox {bottom:3px;position:absolute;width:378px;} 
#chatmsgs {position:absolute;}

benim JavaScript: İşte

<html> 
<body> 
<div id="chatui"> 
<div id="chatmsgs"></div> 
<input type="text" id="chatbox"> 
</div> 
</body> 
</html>

Benim CSS "div. Bunu chatui boyutunun ötesine büyümek kalmaması, chatmsgs div'e overflow:auto ve uygun height eklemek zorunda https://jsfiddle.net/ev3uymw6/

kaynak

2016-04-06 Konrad

$(window).keydown(function(e){ 
if (e.keyCode == 13) { 
if (document.activeElement.id == 'chatbox') { 
var msg = document.getElementById('chatbox').value; 
document.getElementById('chatbox').value = ''; 
var ms = '<p>'+msg+'</p>'; 
$('#chatmsgs').append(ms); 
} 
} 
});

Kontrol dışarı bu keman bahsediyorum ben ne olduğunu görmek için ve hepsini tamamen kaydırın.

$(window).keydown(function(e) { 
 
    if (e.keyCode == 13) { 
 
    if (document.activeElement.id == 'chatbox') { 
 
     var msg = document.getElementById('chatbox').value; 
 
     document.getElementById('chatbox').value = ''; 
 
     var ms = '<p>' + msg + '</p>'; 
 
     $('#chatmsgs').append(ms); 
 
    } 
 
    } 
 
});

#chatui { 
 
    z-index: 3; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    width: 380px; 
 
    height: 150px; 
 
    border: 3px solid #8AC007; 
 
    margin-left: 5px; 
 
} 
 
#chatbox { 
 
    bottom: 3px; 
 
    position: absolute; 
 
    width: 378px; 
 
} 
 
#chatmsgs { 
 
    position: absolute; 
 
    height: 130px; 
 
    overflow: auto; 
 
    width: 378px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="chatui"> 
 
    <div id="chatmsgs"> 
 
    </div> 
 
    <input type="text" id="chatbox"> 
 
    </div> 
 
</body>

kaynak

2016-04-06 18:51:21 sabithpocker

HTML öğesi altta konumlandırılmayacak durumda

cevap

İlgili konular