我想要实现的基本上是将输入中的文本添加到最近附加的内容上。是否可以？它基本上就像一个聊天网站。用户编写的文本应该保存在附加对象中，但我无法实现它。详细信息：- 用户键入消息的输入。附加只读输入的按钮。只读输入应包含用户在原始输入中键入的消息。这是我的脚本！<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
TA贡献2080条经验 获得超4个赞
这是一个供您考虑的方法：
从 中获取用户输入的文本值
MessageBoxinput。创建一个新
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 来实现它。
添加回答
举报
0/150
提交
取消