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

Question

我在获取 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 表格的情况下完成，但我实际上想知道是否可以通过这种方式完成任务。

Answer 1

看看这个代码笔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;" >

Answer 2

您可以在函数中 return false（在函数调用时 return）。这不像在函数调用后（在 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>

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

HTML 5 - input type text getting its value in real time

html

javascript

forms

onsubmit