在 JavaScript 后立即触发更改事件

Question

总结

我目前正在做一个项目，在这个项目中，我必须有一个 id 为 editor 的 textarea 元素，该元素在用户输入时更新一个 id 为 preview 的 div 元素及其值。目前，预览元素仅在用户停止关注编辑器元素时随文本更新，但是，我希望它在用户键入时立即更新。我知道这在 React 中很容易实现，但是有没有一种方法可以在 JavaScript 中做到这一点？这是我到目前为止的代码：

代码

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Previewer</title>
</head>
<body>
  <div id="content">
    <textarea id="editor">
      
    </textarea>
    <div id="preview">
      
    </div>
  </div>
</body>
</html>

JAVASCRIPT
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');

editor.addEventListener('change', (event) => {
  console.log(event);
  preview.textContent = event.target.value;
})

感谢任何帮助。

Answer 1

将事件更改为 input 而不是 change。 input 每当元素的值发生变化时都会触发，即使它仍然处于焦点状态。 change 另一方面，当一个元素被改变然后失去焦点时会触发事件。

阅读更多：https://html.com/attributes/textarea-onchange/#ixzz7AsNuUXNU

const preview = document.getElementById('preview');
const editor = document.getElementById('editor');

editor.addEventListener('input', (event) => {
  console.log(event);
  preview.textContent = event.target.value;
})

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Previewer</title>
</head>
<body>
  <div id="content">
    <textarea id="editor">
      
    </textarea>
    <div id="preview">
      
    </div>
  </div>
</body>
</html>

Answer 2

这是工作代码，您需要将 javascript 放在 html 代码之后，javascript 是脚本语言 whaich 意味着它逐行执行，所以如果您将它放在预览和编辑器元素之前，那么您正在尝试访问他们在初始化之前，它不会工作，当你在 html 代码之后放置 javascript 代码时，代码将工作，因为 textarea 元素已经初始化并且可以使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
<script>
console.log('yes')
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('change', (event) = > {
preview.textContent = event.target.value;
})
</script>
</body>
</html>

在 JavaScript 后立即触发更改事件

Make change event fire straight away in JavaScript

javascript

dom-events

总结

代码