HTML/JS如何輸入文本，並讓它出現在屏幕上

所以，我想要做的是有一個用戶輸入文本的輸入框，當它被提交時，文本出現在屏幕上。我認爲我快到了，但是我遇到了一個問題：文本出現在屏幕上一瞬間，然後消失。下面是相關的HTML：HTML/JS如何輸入文本，並讓它出現在屏幕上

<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>

就像我說的，輸入的文本出現分裂秒鐘，然後消失。任何想法如何解決這個將不勝感激。如果這是一個愚蠢的問題，我很抱歉，但我只是一個初學者，這是我第一次使用輸入框。我搜索了此論壇和網絡的其他區域，找不到任何有用的內容。

來源

2016-04-23 Harvey

可能重複[隱藏div顯示並消失在閃光]（ http://stackoverflow.com/questions/28299401/hidden-div-shows-and-disappears-in-a-flash） – JJJ

將'return false;'添加到'f（）'函數的末尾。 – Neel

你的問題是你的事件是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);

來源

2016-04-23 10:09:14

-1

您可以使用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。

來源

2016-04-23 10:12:35 claudios

當您提交表單時，它會顯示輸出，然後重新加載頁面。這就是爲什麼你只看到一秒鐘。可能的解決方案是在f()函數定義的末尾包含return false。

來源

2016-04-23 10:21:42 Krishna

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

來源

2016-04-23 10:24:23

如果你想要的是使文本顯示，沒有必要創建一個表單來提交。只需刪除表單並將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>

來源

2016-04-23 10:35:01

-1

什麼.....不.... no.no 你要做的就是確實想爲文字顯示在屏幕上，但會基本消失，因爲你需要的PHP庫存哪裏它會被存儲，所以它會消失的文字總是當你重新加載網站，所以你需要的是行動按鈕只是把按鈕放在左邊，這使得它像保護

來源

2017-06-26 10:23:54

問題很明顯，文本消失而不重新加載頁面。 – kundrata

HTML/JS如何輸入文本，並讓它出現在屏幕上

回答

相關問題