HTML 5 - 输入类型文本实时获取其值答案

【问题标题】：HTML 5 - input type text getting its value in real timeHTML 5 - 输入类型文本实时获取其值
【发布时间】：2016-07-30 20:42:31
【问题描述】：

我在获取 html 页面的输入元素的值并将其打印在页面上的段落中时遇到了特定问题。

代码：

<!doctype html>
<html>
  <head>
    <script>
        function TakeValue()
        {
            var xs = document.getElementById("text").value;
            var p = document.getElementById("para");
            p.textContent = String(xs);
            document.body.appendChild(p);
        }
    </script>
  </head>
  <body>
    <form onsubmit="TakeValue()" method="get" action="">
        <input type="submit" name="submit" id="click">
        <input type="number" name="value" id="text">
    </form>
    <p id="para">abs</p>
  </body>
</html>

当我按下提交时，该段落的文本内容有一段时间发生了变化，但之后又回到了它的初始值。我希望该段落在按下提交后保持更改。

我知道这可以在不使用 html 表单的情况下完成，但我实际上想知道是否可以通过这种方式完成任务。

【问题讨论】：

表单正在提交，导致页面重新加载。您可以使用onsubmit="TakeValue(); return false" 取消提交，但如果您不打算以一种或另一种方式提交，那么使用表单是没有意义的。顺便说一句，你不需要使用String()，因为xs已经包含了一个字符串。
如果您没有将表单发布到 URL，请不要使用 action="" 并且不要连接到 onsubmit。相反，使用带有 onclick 处理程序的
还要确保你使用<button type="button">，否则它会在表单中充当提交按钮。
哦，我明白了！非常感谢！
如果任何回复都回答了您的问题，请接受回复，以免其他人相信您的问题仍未得到解答。如果您仍有疑问，请详细说明，我们会尽力提供帮助。

标签： javascript html forms onsubmit

【解决方案1】：

您可以在函数中return false（并在函数调用时返回）。这不像在函数调用之后（在onsumbit="" 内）指定return false 那样清楚，这对于维护代码的人来说可能会更好。

function TakeValue() {
  var xs = document.getElementById("text").value;
  var p = document.getElementById("para");
 
  p.textContent = String(xs);
  document.body.appendChild(p);

  // perform FormValidation()
  // perform AJAXExecution()
  
  return false;
}

<form onsubmit="return TakeValue()" method="get" action="">
  <input type="submit" name="submit" id="click">
  <input type="number" name="value" id="text">
</form>
<p id="para">abs</p>

【讨论】：

这就是我想要做的。非常感谢你！ :)

【解决方案2】：

看看这个代码笔http://codepen.io/anon/pen/oLrqEK

我变了。

 function TakeValue()
 {
      var xs = document.getElementById("text").value;
      var p = document.getElementById("para");
      p.textContent = String(xs);

       // Do you want to add a p or change the text
       // document.body.appendChild(p);

      return false;
  }

还有这个<form onsubmit="TakeValue(); return false;" >

【讨论】：

我尝试了一些解决方案后忘记修改代码。非常感谢！
您要添加另一个段落还是只是更改现有 p 的文本？
不，只是更改段落，我的意思是每次按提交。