在实现上述功能的过程中,您可以使用HTML和JavaScript来处理用户输入并动态更新p2元素的内容。以下是一种可能的实现方式:
<input type="text" id="textInput">
<p id="p2"></p>
// 获取文本输入框和p2元素
var textInput = document.getElementById("textInput");
var p2 = document.getElementById("p2");
// 监听文本输入框的keydown事件
textInput.addEventListener("keydown", function(event) {
// 检查是否按下了回车键(keyCode为13)
if (event.keyCode === 13) {
// 获取文本输入框的值
var inputValue = textInput.value;
// 创建一个新的文本节点
var newText = document.createTextNode(inputValue);
// 将新的文本节点添加到p2元素中
p2.appendChild(newText);
// 清空文本输入框的值
textInput.value = "";
}
});
通过以上的代码实现,用户可以在文本输入框中输入内容,按下回车键后,p2元素将会显示用户输入的文本。当用户继续输入并按下回车键时,新的文本将会以逐行的形式添加到p2元素中。
需要注意的是,以上代码只是一种实现方式,您可以根据具体需求进行修改和调整。另外,为了使页面更具交互性和美观性,您可以使用CSS来美化文本输入框和p2元素的样式。
领取专属 10元无门槛券
手把手带您无忧上云