HTML：在同一頁面上自動顯示給定輸入

Question

我想問我們應該如何在 HTML 中編寫以自動顯示 Web 用戶在同一頁面上給出的輸入，而無需按鈕或單擊。

這是我從其他地方復制的示例：

<!DOCTYPE HTML>
<HTML>
<head>
</head> 
<body>
<script type="text/javascript">

function changeThis(){      
   var formInput = document.getElementById('theInput').value;   
   document.getElementById('newText').innerHTML = formInput;   }  
</script>

<p>You wrote: <span id='newText'></span> </p> 
<input type='text' id='theInput'>   
<input type='button' onclick='changeThis()' value='See what you wrote'/>   
</body>  
</html>

我想在不使用任何按鈕、單擊或 Enter 選項卡的情況下獲得相同的效果。

換句話說，給出的輸入顯示在用戶在行框上放東西之后的“你寫的”旁邊。

Answer 1

請看下面的代碼。 只要您在輸入框中輸入，它將立即寫入文本：

<!DOCTYPE html>
<html>
<body>


Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<p id="rewrite"></p>

<script>
function myFunction() {
  var x = document.getElementById("fname");
  document.getElementById("rewrite").innerHTML=x.value;
}
</script>

</body>
</html>

Answer 2

請參閱下面的代碼片段以獲取解決方案：

 let input = document.querySelector('#theInput'); input.addEventListener('input', () => { document.querySelector('#newText').innerHTML = input.value; })

 <p>You wrote: <span id='newText'></span> </p> <input type='text' id='theInput'> <input type='button' value='See what you wrote'/>

HTML：在同一頁面上自動顯示給定輸入

問題描述

2 個解決方案

解決方案1
0 2020-05-31 18:24:36

解決方案2
0 2020-05-31 18:25:26

HTML：在同一頁面上自動顯示給定輸入

問題描述

2 個解決方案

解決方案1 0 2020-05-31 18:24:36

解決方案2 0 2020-05-31 18:25:26

解決方案1
0 2020-05-31 18:24:36

解決方案2
0 2020-05-31 18:25:26