动态聊天输入框

一个陌生朋友

已于 2024-06-05 16:50:45 修改

阅读量1.5k

点赞数 36

文章标签： html css javascript

于 2024-03-08 13:04:33 首次发布

本文链接：https://blog.csdn.net/qq_52848404/article/details/136558672

版权

一. 了解HTML结构

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它由一系列的元素组成，这些元素通过标签来定义。

HTML结构如下：

<!DOCTYPE html>声明了文档类型和HTML版本。

<html>元素是所有其他HTML元素的容器。

<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义了字符编码，<title> 定义了网页标题。

<body> 元素包含了可见的页面内容。

<div class="card"> 是一个容器，用于包裹文本输入框和按钮。

<textarea id="myTextarea">是一个多行文本输入框。

<button id="send"> 是一个按钮，用于触发发送动作。

二. 初步创建div

从创建card到textarea再到button的步骤如下：

使用<div>标签创建一个容器，并给它一个类名card。

在card内部，添加一个<textarea>元素，用于输入文本，并给它一个id以便于后续引用。

紧接着添加一个<button>元素，用于发送文本，同样给它一个id用于后续编辑可不写。

三. 初步创建CSS

从创建card初步样式开始到textarea再到button：

.card 类定义了card的样式，包括位置、大小、边框等。

.card textarea 选择器为textarea定义了样式，如高度、边框等。

.card button选择器为button定义了样式，如背景颜色、边框等。

四. 初步创建JavaScript逻辑

从创建DOMContentLoaded获取元素开始到绑定元素再到`textarea`调高逻辑到最高高度逻辑：

使用document.addEventListener('DOMContentLoaded', function() {...});确保在文档加载完成后执行代码。

获取textarea元素并给它绑定textarea事件监听器，当输入内容变化时触发adjustTextareaHeight函数。

adjustTextareaHeight函数首先重置textarea的高度，然后根据内容调整高度，如果高度超过200px，则将高度设置为200px。

五. 代码示例

一、HTML结构示例

<div class="card">
  <textarea id="myTextarea" placeholder="你好世界"></textarea>
  <button id="send">发送</button>
</div>

二、CSS样式示例

①、初步大概

card {
  /* ... 此处省略 ... */
}
.card textarea {
  /* ... 此处省略 ... */
  height: 20px; /* 初始高度设置为20px */
}
.card button {
  /* ... 此处省略 ... */
}

②、完整

.card {
  display: flex;
  align-items: center;
  position:fixed;
  left:50%;
  bottom:50px;
  transform: translate(-50%);
  width:90%;
  min-height:40px;
  padding:5px;
  margin: 0% auto;
  border: 4px solid #999;
  border-radius:10px;
}
.card > * {
  align-self: flex-end;
}
  
.card textarea {
  flex-grow: 1;
  height: 20px; 
  resize: none;
  margin:auto 0;
  border-radius: 5px;
  display: block; 
}

.card button {
  width:50px;
  height:40px;
  color:white;
  background-color:#33CCFF;
  margin:0 0 0 5px;
  border-radius:5px;
  border:none;
}

三JavaScript逻辑示例

document.addEventListener('DOMContentLoaded', function() {
    var textarea = document.getElementById('myTextarea');
    function adjustTextareaHeight() {
        // 重置高度以获取正确的滚动高度
        textarea.style.height = '30px';
        // 根据内容调整高度
        var newHeight = textarea.scrollHeight;
        // 如果新高度超过200px，则将高度设置为200px，否则按实际滚动高度设置
        if (newHeight > 200) {
            textarea.style.height = '200px';
        } else {
            textarea.style.height = newHeight + 'px';
        }
    }
    // 监听输入事件以调整高度
    textarea.addEventListener('input', adjustTextareaHeight);
    // 初始调整
    adjustTextareaHeight();
});

六、完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>输入框</title>
<style>

.card {
  display: flex;
  align-items: center;
  position:fixed;
  left:50%;
  bottom:50px;
  transform: translate(-50%);
  width:90%;
  min-height:40px;
  padding:5px;
  margin: 0% auto;
  border: 4px solid #999;
  border-radius:10px;
}
.card > * {
  align-self: flex-end;
}
  
.card textarea {
  flex-grow: 1;
  height: 20px; 
  resize: none;
  margin:auto 0;
  border-radius: 5px;
  display: block; 
}

.card button {
  width:50px;
  height:40px;
  color:white;
  background-color:#33CCFF;
  margin:0 0 0 5px;
  border-radius:5px;
  border:none;
}

</style>
</head>
<body>

<div class="card">
  <textarea id="myTextarea" type="text/" placeholder="你好世界"></textarea>
  <button id="send">发送</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var textarea = document.getElementById('myTextarea');

    function adjustTextareaHeight() {
        // 重置高度以获取正确的滚动高度
        textarea.style.height = '30px';
        // 根据内容调整高度
        var newHeight = textarea.scrollHeight;
        
        // 如果新高度超过200px，则将高度设置为200px，否则按实际滚动高度设置
        if (newHeight > 200) {
            textarea.style.height = '200px';
        } else {
            textarea.style.height = newHeight + 'px';
        }
    }

    // 监听输入事件以调整高度
    textarea.addEventListener('input', adjustTextareaHeight);

    // 初始调整
    adjustTextareaHeight();
});

</script>
</body>
</html>

http://project.webcats.cn/bx/39232/28067 演示链接

通过以上步骤，创建一个基本的动态聊天输入框。随着学习的深入，可以进一步美化界面、增加功能，如限制输入字数、实现表情插入等。

一个陌生朋友

关注

36
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
动态聊天输入框

确保在文档加载完成后执行代码。adjustTextareaHeight函数首先重置textarea的高度，然后根据内容调整高度，如果高度超过200px，则将高度设置为200px。元素包含了文档的元（meta）数据，如定义了字符编码，定义了网页标题。在card内部，添加一个元素，用于输入文本，并给它一个id以便于后续引用。紧接着添加一个元素，用于发送文本，同样给它一个id用于后续编辑可不写。
复制链接

扫一扫