javascript - 如何在 JavaScript 中实时预览输入元素？

Question

我想用 JavaScript 实时预览 HTML 中的输入元素。就像使用时会在字段中写入内容一样，它会自动打印字段下的文本。那么我该怎么做呢？我试图以不同的方式做到这一点。但每次我都不确定。

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

field.addEventListener('keyup', () => {
  field.addEventListener('keypress', () => {
    showCase.innerHTML = this.value
  })
})

Answer 1

尝试这个：

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

field.addEventListener('input', (e) => {
 showCase.innerHTML=e.target.value
})

<p id="Message"></p>
<input id="Field" type="text"/>

Answer 2

您可以尝试以下方法。

const myInput = document.getElementById('input'); // Input Element with id="input" const myOutput = document.getElementById('output'); // An empty paragraph with id="output"

function handleInputKeypress(e) {
  myOutput.textContent = e.target.value;
}

myInput.addEventListener('keyup', handleInputKeypress);

Answer 3

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

// Listen for input event
field.addEventListener('input', e => {
    showCase.innerText = e.target.value
})