Javascript 如何停止文本重叠文本区域_Javascript_Html_Css

Javascript 如何停止文本重叠文本区域

javascript html css

Javascript 如何停止文本重叠文本区域,javascript,html,css,Javascript,Html,Css,如果输入的信息太长，则会与聊天应用程序中的以下文本区域重叠如何解决这个问题。我还附上了一些图片来澄清这个问题 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me

如果输入的信息太长，则会与聊天应用程序中的以下文本区域重叠

如何解决这个问题。我还附上了一些图片来澄清这个问题

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <title>MongoChat</title>
    <style>
        #messages{height:300px;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3 col-sm-12">
            <h1 class="text-center">
                MongoChat
                <button id="clear" class="btn btn-danger">Clear</button>
            </h1>
            <div id="status"></div>
            <div id="chat">
                <input type="text" id="username" class="form-control" placeholder="Enter name...">
                <br>
                <div class="card">
                    <textarea id="messages" class="well card-block">

                    </textarea>
                </div>
                <br>
                <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

<script>
    (function(){
        var element = function(id){
            return document.getElementById(id);
        }

        // Get Elements
        var status = element('status');
        var messages = element('messages');
        var textarea = element('textarea');
        var username = element('username');
        var clearBtn = element('clear');

        // Set default status
        var statusDefault = status.textContent;

        var setStatus = function(s){
            // Set status
            status.textContent = s;

            if(s !== statusDefault){
                var delay = setTimeout(function(){
                    setStatus(statusDefault);
                }, 4000);
            }
        }

        // Connect to socket.io
        var socket = io.connect('http://127.0.0.1:4000');

        // Check for connection
        if(socket !== undefined){
            console.log('Connected to socket...');

            // Handle Output
            socket.on('output', function(data){
                //console.log(data);
                if(data.length){
                    for(var x = 0;x < data.length;x++){
                        // Build out message div
                        var message = document.createElement('div');
                        message.setAttribute('class', 'chat-message');
                        message.textContent = data[x].name+": "+data[x].message;
                        messages.appendChild(message);
                        messages.insertBefore(message, messages.firstChild);
                    }
                }
            });

            // Get Status From Server
            socket.on('status', function(data){
                // get message status
                setStatus((typeof data === 'object')? data.message : data);

                // If status is clear, clear text
                if(data.clear){
                    textarea.value = '';
                }
            });

            // Handle Input
            textarea.addEventListener('keydown', function(event){
                if(event.which === 13 && event.shiftKey == false){
                    // Emit to server input
                    socket.emit('input', {
                        name:username.value,
                        message:textarea.value
                    });

                    event.preventDefault();
                }
            })

            // Handle Chat Clear
            clearBtn.addEventListener('click', function(){
                socket.emit('clear');
            });

            // Clear Message
            socket.on('cleared', function(){
                messages.textContent = '';
            });
        }

    })();
</script>
</body>
</html>

你的问题是身高。您为

消息指定了一个固定的高度，该高度为300px

最好将此更改为添加divs
，而不是在textarea中添加文本，或者将height
设置为auto
，但如果滚动条超过页面高度，您还必须处理滚动条
   <style>
        #messages{height:auto;}
    </style>

你的问题是身高。您为消息指定了一个固定的高度，该高度为300px

最好将此更改为添加divs
，而不是在textarea中添加文本，或者将height
设置为auto
，但如果滚动条超过页面高度，您还必须处理滚动条
   <style>
        #messages{height:auto;}
    </style>

只需将自动
高度设置为.card
和溢出：自动用于滚动

.card{
高度：自动；
溢出：自动；
}

蒙哥哈特
清楚的




只需将自动
高度设置为.card
和溢出：自动用于滚动

.card{
高度：自动；
溢出：自动；
}

蒙哥哈特
清楚的




您真的不应该在这里转储整个应用程序。取而代之的是“分解问题”，在这种情况下，问题只是“文本区域重叠”。简单地包括必要的HTML和CSS，以便提出问题，然后简单地询问需要做什么。我们真的不需要这些图片。你真的不应该把你的整个申请都扔在这里。取而代之的是“分解问题”，在这种情况下，问题只是“文本区域重叠”。简单地包括必要的HTML和CSS，以便提出问题，然后简单地询问需要做什么。我们也真的不需要图片。嗨，当信息显示在屏幕上时，请告诉我如何介绍引导的类井。嗨，当信息显示在屏幕上时，请告诉我如何介绍引导的类井。
   <style>
        #messages{
          height:300px; 
          overflow: auto;
        }
    </style>