如何在输入后立即显示输入到输入框中的文本答案

【问题标题】：How to display text typed into input box immediately after being typed如何在输入后立即显示输入到输入框中的文本
【发布时间】：2021-12-06 16:41:10
【问题描述】：

我要做的是立即显示文本，我将它们输入到输入框中，到目前为止，我的 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>

【问题讨论】：

尝试一个“onchange”事件监听器。 stackoverflow.com/questions/24865177/…
@Strella OP 已经尝试过了。
也试过 oninput 但没有用
如果您不希望将输入内容作为 HTML 进行解释，您还应该使用 innerText 而不是 innerHTML
我看到问题可能是 document.getElementsByClassName("Output-text").innerHTML 因为它提供了一个数组。

标签： javascript html css forms input

【解决方案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>

【讨论】：

@HakeemBalogun 看看我的例子，它对我有用。