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

HTML/JS How to input text and have it appear on screen

本文关键字：显示 屏幕 文本 JS 何输入 输入 HTML      更新时间：2023-09-26

所以，我要做的就是有一个输入框，用户在其中键入文本，当提交文本时，文本出现在屏幕上。我想我快到了，但我遇到了一个问题：文本在屏幕上出现一瞬间，然后消失。以下是相关的 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>

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

您的问题是您的事件正在提交，在执行 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);

如果您只想显示文本，则无需创建要提交的表单。只需删除窗体并将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>

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

另一个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>

你可以在这里使用 jquery submit 函数。试试下面的这个。.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();
    });
});

注意：先加载 jquery cdn，然后再加载 </body> 标签。

什么.....不。。。。no.no您要做的就是希望文本出现在屏幕上，但它会消失，因为您需要存储它的 php 库存，因此当您重新加载网站时它会始终消失，所以您需要的是操作按钮，只需将按钮放在左侧，使其像受保护一样

相关文章：