Question

所以，我要做的就是有一个输入框，用户可以在其中键入文本，当提交文本时，文本会显示在屏幕上。我想我差不多了，但我遇到了一个问题：文字出现在屏幕上一瞬间然后就消失了。以下是相关的HTML：

<h1 id="outputtext"></h1>
<div id="box">
    <form onsubmit="f()">
        <input type="text" id="input" placeholder="Enter text" autocapitalize="off" />
        <input type="submit" id="submitbutton">
    </form>
</div>

内部JavaScript：

<script type="text/javascript">
function f() {
    var t = document.getElementById("input").value;
    document.getElementById("outputtext").innerHTML = t;
}
</script>

就像我说的那样，输入的文本会在一瞬间出现，然后消失。任何关于如何解决这个问题的想法将不胜感激。如果这是一个愚蠢的问题，我很抱歉，但我只是一个初学者，这是我第一次使用输入框。我搜索了这个论坛和网络的其他区域，找不到任何有用的内容。

Answer 1

你的问题是你的事件是onsubmit，执行f（）后，页面正在重新加载。要避免这种情况，请在f函数中添加一个事件参数，并在其上调用preventDefault();。

而不是通过html属性向您的对象添加事件处理程序，而不是在您的html对象上使用addEventListener。

这是一个没有jQuery的代码示例：

<script type="text/javascript">
function f(e) {
   e.preventDefault();
   var t = document.getElementById("input").value;
   document.getElementById("outputtext").innerHTML = t;
}
document.getElementById("yourform").addEventListener("submit", f);
</script>

注意：您需要在表单元素中添加ID（如id="yourform"）。另外，为了避免一些加载问题，请在</body>之前将脚本标记添加到页面末尾。

编辑：
我的不好，我写了document.getElementById("yourform").addEventListener("click", f);而不是document.getElementById("yourform").addEventListener("submit", f);

Answer 2

提交表单时，它会显示输出，然后重新加载页面。这就是为什么你只是瞬间看到它。可能的解决方案是在return false函数定义的末尾添加f ()。

Answer 3

另一个 jQuery 替代方案：只需使用点击功能，而不是调用onsubmit方法：

<-- jQuery CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var t;
        $('#submitbutton').click(function() {
            t = $('#input').val();
            $('#outputtext').text(t);   
        });
    });
</script>

<强> HTML

<h1 id="outputtext"></h1>
<div id="box">
    <form>
        <input type="text" id="input" placeholder="Enter text" autocapitalize="off" />
        <input type="submit" id="submitbutton">
    </form>
</div>

Answer 4

如果您只想显示文本，则无需创建要提交的表单。只需删除表单，然后将f()功能添加到按钮的onclick事件中即可。你的javascript功能没问题。

function f() {
  var t = document.getElementById("input").value;
  document.getElementById("outputtext").innerHTML = t;
}

<h1 id="outputtext"></h1>
<div id="box">
  <input type="text" id="input" placeholder="Enter text" autocapitalize="off" />
  <button onclick="f()" type="button" id="submitbutton">Click Me!</button>
</div>

Answer 5

您可以在此处使用jquery提交功能。试试下面这个。 HTML：

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

脚本：

$(function() {
  $( "#target" ).submit(function( event ) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });
});

注意：首先在</body>标记之前加载jquery cdn。

Answer 6

什么.....不....没有你所要做的就是希望文本显示在屏幕上，但它会消失，因为你需要PHP库存存储它所以文本它会在你重新加载网站时消失所以你需要的是动作按钮只是把按钮放在左边和使它像受保护的

HTML / JS如何输入文本并将其显示在屏幕上

6 个答案: