如何在輸入后立即顯示輸入到輸入框中的文本

Question

我想要做的是立即顯示文本，我將它們輸入到輸入框中，到目前為止，我的 javascript 函數甚至根本不起作用，我只需要該函數來顯示何時在輸入框中輸入或刪除文本文本框。

<!DOCTYPE html>
<html>
<head>
    <link href="styles.css" rel="stylesheet">
    
</head>
<body>
<div class="output-box">
   <P class="Output-text"></P>
   <P class="Output-text2"></P> 
</div>

<div class="forms">
    <form action="POST">
        <label class="label" for="name">First Name:</label>
        <input type="text" id="name" name="name" onchange="GetAndDisplayInput()">
        <br>
        <br>
        <label class="label" for="name">Last Name:</label>
        <input type="text" id=" last-name" name="name" onchange="GetAndDisplayInput()">
    </form>
</div>
<script>
    function GetAndDisplayInput(){
    var inputFirstName= document.getElementById("name").value;
    var inputLastName= document.getElementById("last-name").value;
    document.getElementsByClassName("Output-text").innerHTML = inputFirstName;
    document.getElementsByClassName("Output-text2").innerHTML = outputFirstName;
}
</script>
</body>








</html>

Answer 1

嘗試使用oninput事件偵聽器而不是onchange ：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

這將在每次更改后立即觸發，而不是每次元素模糊時（未聚焦/點擊離開）。

例子

 function display() { document.querySelector("p").innerText = document.querySelector("input").value; }

 <input oninput="display();" placeholder="Type in some text"> <p></p>

如何在輸入后立即顯示輸入到輸入框中的文本

問題描述

1 個解決方案

解決方案1
2 2021-10-19 18:46:21

如何在輸入后立即顯示輸入到輸入框中的文本

問題描述

1 個解決方案

解決方案1 2 2021-10-19 18:46:21

解決方案1
2 2021-10-19 18:46:21