Question

我正在做一些事情，可以让您更新页面中的文本。有一个提交按钮，它会更新上面的文本框。触发它的另一种方法是在文本框输入中使用回车键。

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

这是代码。

<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中的页面元素

3 个答案: