如何通过JavaScript实现清空第一个textarea时同步清空第二个textarea？

当然可以实现，只需要通过JavaScript监听第一个textarea的内容变化事件，当它被清空时自动同步清空第二个textarea。具体实现步骤如下：

1. 给textarea添加标识ID #

先给两个textarea分别设置唯一ID，方便JS定位元素：

<textarea id="inputText" placeholder="输入内容"></textarea>
<button id="encryptBtn">encrypt</button>
<textarea id="outputText" readonly placeholder="加密结果"></textarea>

2. 添加内容监听逻辑 #

通过监听第一个textarea的input事件，实时检查其内容状态。当内容为空时，直接清空第二个textarea的内容：

const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');

// 监听输入框内容变化
inputText.addEventListener('input', function() {
  // 当输入框内容为空（包括仅输入空格的情况）时，同步清空结果框
  if (this.value.trim() === '') {
    outputText.value = '';
  }
});

// 保留原有的加密按钮逻辑（示例）
document.getElementById('encryptBtn').addEventListener('click', function() {
  const content = inputText.value;
  // 这里替换成你的实际加密逻辑，示例直接返回输入内容
  outputText.value = content;
});

补充说明 #

• input事件会在textarea内容发生任何变化时触发（包括删除字符、粘贴内容、清空操作等），确保响应的实时性。
• 如果希望仅当输入框完全无任何字符（不允许空格）时才清空结果框，可去掉trim()，直接判断this.value === ''。

内容的提问来源于stack exchange，提问作者Alba Guzmán