JavaScript实现实时获取textarea值并动态填充其他输入框

核心逻辑非常简单：监听文本域的内容变化事件，每次变化时把文本域的当前值同步赋值给目标输入框即可。

注意不要用keyup/keydown这类键盘事件做监听，这类事件无法覆盖右键粘贴、鼠标剪切、拖拽填充、语音输入、输入法联想选字等非键盘触发的内容修改场景，直接用DOM标准的input事件即可，所有导致元素值变化的操作都会触发该事件，兼容性覆盖所有主流浏览器。

原生JavaScript实现 #

先写基础HTML结构：

<textarea id="sourceTextarea" placeholder="在此输入内容"></textarea>
<input type="text" id="targetInput" placeholder="自动同步填充">

绑定事件实现同步逻辑：

const textareaEl = document.getElementById('sourceTextarea')
const inputEl = document.getElementById('targetInput')

textareaEl.addEventListener('input', function() {
  // 直接把textarea的当前值赋值给input即可
  // 不需要保留换行的话可以替换换行符为空格：this.value.replace(/\n/g, ' ')
  inputEl.value = this.value
})

常见前端框架实现 #

如果项目用了前端框架，不需要手动操作DOM，直接通过双向绑定绑定同一个状态变量即可，框架会自动完成值的同步：

• Vue3 示例：

<template>
  <textarea v-model="syncValue" placeholder="在此输入内容"></textarea>
  <input type="text" v-model="syncValue" placeholder="自动同步填充">
</template>

<script setup>
import { ref } from 'vue'
const syncValue = ref('')
</script>

• React 示例：

import { useState } from 'react'

export default function SyncComponent() {
  const [syncValue, setSyncValue] = useState('')
  return (
    <>
      <textarea
        value={syncValue}
        onChange={e => setSyncValue(e.target.value)}
        placeholder="在此输入内容"
      />
      <input
        type="text"
        value={syncValue}
        onChange={e => setSyncValue(e.target.value)}
        placeholder="自动同步填充"
      />
    </>
  )
}

小提示：input是单行输入框，不会识别换行符，如果textarea输入了多行内容，直接同步到input时换行符会被自动忽略，有需要的话可以在同步时把换行符替换为空格，避免内容视觉上出现拼接断层。

内容的提问来源于stack exchange，提问作者Tushar Arora