如何将文本框中的文本保留在附加框中？
我想要实现的基本上是将输入中的文本添加到最近附加的内容上。是否可以？它基本上就像一个聊天网站。用户编写的文本应该保存在附加对象中，但我无法实现它。
详细信息：- 用户键入消息的输入。附加只读输入的按钮。只读输入应包含用户在原始输入中键入的消息。
这是我的脚本！
<html>
<head>
<title>Friend's Circle</title>
<style>
.Hammer-Div {
background-color: #3a3939;
color: white;
height: 100%;
width: 80px;
border-radius: 10px 10px 10px 10px;
transition: 0.4s;
position: fixed;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: rgb(105, 105, 105);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.Items {
cursor: pointer;
}
p {
font-size: 30px;
display: none;
}
.Results {
height: 100%;
width: 92.5%;
background-color: #585858;
border-radius: 10px 10px 10px 10px;
float: right;
}
.MessageBox {
width: 90%;
height: 80%;
border-radius: 10px 10px 10px 10px;
background-color: hsl(0, 1%, 27%);
border: none;
float: left;
margin-left: 1%;
margin-top: 0.5%;
color: white;
font-size: 30px;
padding-left: 20px;
}
.MessageUnit {
height: 10%;
width: 100%;
background-color: #383838;
border-radius: 10px 10px 10px 10px;
}
千万里不及你1回答
-
犯罪嫌疑人X
这是一个供您考虑的方法：从 中获取用户输入的文本值MessageBox input。创建一个新input标签，创建它readonly并为新输入分配输入value中的值MessageBox将输入附加到Results$("#SendMessage").click(function () { // 1 const msgBoxIn = document.getElementById('MessageBox'); // 2 const text = msgBoxIn.value; const newMsgIn = document.createElement('input'); newMsgIn.setAttribute('readonly', true); // 3 newMsgIn.value = text; const resultsDiv = documet.getElementById('Results'); const br = document.createElement('br'); resultsDiv.appendChild(br); resultsDiv.appendChild(newMsgIn);});生成的 HTML 将如下所示：<div class="Results" id="Results"> <center> <div class="MessageUnit"> <input class="MessageBox" placeholder="Type Your Message Here!" id="MessageBox"> <img src="https://th.bing.com/th?q=Send+Arrow+Icon&w=120&h=120&c=1&rs=1&qlt=90&cb=1&pid=InlineBlock&mkt=en-WW&adlt=moderate&t=1&mw=247" style="border-radius: 50%; width: 60px; height: 60px; border-color:#ffffff; margin-top: 0.5%; cursor: pointer;" border="4px" id="SendMessage"> </div> </center> <br> <input readonly value='Value you added'></div> id另请注意，您在此处使用了相同的名称class：<div class="Results" id="Results">。id根据CSS选择器特异性规则，只有声明使用的CSS才会被应用。考虑不同的名称。注意：该代码片段是纯 JS 格式的。考虑一下如何使用 jquery 来实现它。
随时随地看视频慕课网APP
相关分类
JavaScript