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

获取html页面的输入元素的值时遇到特定问题，并将其打印在页面上的段落中。HTML 5 - 实时获取其值的输入类型文本

代码：

<!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表单的情况下完成，但我确实想知道是否可以通过这种方式完成任务。

来源

2016-07-30 Iulian Barbu

正在提交的形式，这会导致页被重新加载。您可以用'onsubmit =“TakeValue（）; return false”'取消提交，但如果您不打算以某种方式提交，那么使用表单是没有意义的。顺便说一句，你不需要使用'String（）'，因为'xs'已经包含一个字符串。 – nnnnnn

如果你没有发布你的表单到一个URL，不要使用'action =“”'并且不要挂钩'onsubmit'。相反，使用带有'onclick'处理函数的

还要确保你做了'

您可能return false的功能（并返回在函数调用）。这不像在函数调用之后指定return false那么明显（在onsumbit=""之内），这对于维护代码的人可能更好。

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>

来源

2016-07-30 20:53:34 vol7ron

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

查看此代码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;" >

来源

2016-07-30 20:51:30 surfmuggle

我尝试了一些解决方案后忘了修改代码。非常感谢你！ –

你想添加另一个段落，或只是改变现有的p的文本？ – surfmuggle

不，只是改变段落，我的意思是每次按下提交。 –

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

回答

相关问题