提交文本输入会擦除 JavaScript 中的页面元素

Question

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

按下 "Send" 按钮或回车键时应该发生的事情是，文本将进入文本框。问题是，当它们被使用时，上面的文本框也会被删除，文本在那里闪烁一秒钟。我怎样才能使文本在上方的文本框中显示出来？

代码如下：

<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 很陌生，这是我的第一个项目，所以我不确定如何进行。

非常感谢您的帮助。

Answer 1

您的表单正在提交，如果未提供 action，默认情况下会刷新页面。添加事件侦听器以防止这种情况发生：

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

Answer 2

问题是您正在使用提交输入。这会破坏您的页面，因为它会强制重新加载。

请参阅下面的更新。添加值后，还在您的文本输入上添加了 .focus()。

<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 = "";
              document.getElementById("TextInputBox").focus();
              
            }
      </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 = "button" id = "btnSend" value = "Send" onclick = "SendMsg();"/>
      </form>
   </body>
</html>

Answer 3

正如@jack-bashford 所说，您的表单提交导致页面刷新。对于您要尝试执行的操作，您实际上并不需要表单，因此除非您实际将该数据提交到某个地方，否则我建议您将其删除。

试试这个：

<html>
  <body>
    <div id="ScrollBox" style="height:480px;width:240px;border:1px solid #ccc;overflow:auto;"></div>
    : <input type="text" id="TextInputBox" title="Type what you want to send" name="msg" onkeydown="if (event.keyCode == 13) SendMsg();"/>
    <input type="button" id="btnSend" value="Send" onclick="SendMsg();"/>
    <script>
      function SendMsg() {
        document.getElementById('ScrollBox').innerHTML = document.getElementById("TextInputBox").value + "<br />" + "<br />" + document.getElementById('ScrollBox').innerHTML;
        document.getElementById('TextInputBox').value = "";
      }
    </script>
  </body>
</html>

提交文本输入会擦除 JavaScript 中的页面元素

Submitting text input erases page element in JavaScript

html

javascript

css

webpage