gpt4 book ai didi

javascript - 提交文本输入会删除 JavaScript 中的页面元素

转载 作者:太空宇宙 更新时间:2023-11-03 20:26:01 25 4
gpt4 key购买 nike

我正在研究可以让您更新页面内文本的东西。有一个提交按钮,它更新上面的文本框。触发它的另一种方法是在文本框输入内使用回车键。

当按下“发送”按钮或回车键时,应该发生的是文本将进入文本框。问题是,当它们被使用时,上面的文本框也会被删除,文本在那里闪烁一秒钟。如何使文本在上方的文本框中显示出来?

代码如下:

<html>
<head>
<script type = "text/javascript">
function SendMsg() {
document.getElementById('ScrollBox').innerHTML = document.send.msg.value + "<br />" + "<br />" + document.getElementById('ScrollBox').innerHTML;
document.getElementById('TextInputBox').value = "";
}
</script>
</head>

<body>
<div id = "ScrollBox" style="height:480px;width:240px;border:1px solid #ccc;overflow:auto;"></div>
<form name = "send" action = "">
: <input type = "text" id = "TextInputBox" title = "Type what you want to send" name = "msg" onkeydown = "if (event.keyCode == 13)
SendMsg()"/>
<input type = "submit" id = "btnSend" value = "Send" onclick = "SendMsg();"/>
</form>
</body>
</html>

如果有一种方法可以让光标在每次提交时都返回到文本输入处,那就更好了。

我是 JavaScript 的新手,这是我的第一个元素,所以我不确定如何继续。

非常感谢您的帮助。

最佳答案

如果没有给出 action,您的表单正在提交,默认情况下会刷新页面。添加事件监听器以防止发生这种情况:

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

关于javascript - 提交文本输入会删除 JavaScript 中的页面元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54568609/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com