如何在JavaScript中获取textarea的输入值？打字游戏开发需求

云原生阿岚

2026-7-1

解决方案

你的代码问题在于只在页面初始化时获取了一次textarea的值（此时是空的），既没等到DOM元素加载完成就执行，也没监听用户输入的动态变化。下面是两种可行的解决方式：

方式一：实时监听用户输入

<textarea class="text-box" rows="8" cols="55"></textarea>

<script>
// 等页面所有元素加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中textarea元素，querySelector比getElementsByClassName更简洁
  const typedText = document.querySelector('.text-box');

  // 监听输入事件，用户每输入/删除内容都会触发
  typedText.addEventListener('input', function() {
    const textValue = this.value;
    console.log(textValue);
  });
});
</script>

方式二：按需获取（比如点击按钮时）

如果不需要实时监听，只在特定操作（比如点击确认按钮）时获取内容，可以这样写：

<textarea class="text-box" rows="8" cols="55"></textarea>
<button>获取输入内容</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const typedText = document.querySelector('.text-box');
  const getBtn = document.querySelector('button');

  getBtn.addEventListener('click', function() {
    const textValue = typedText.value;
    console.log(textValue);
  });
});
</script>