如何对比textarea中的文本并修改button的文字？

实现思路 #

• 先存储文本框的初始内容作为对比基准
• 监听文本框的输入事件，实时对比当前内容与基准值
• 根据对比结果修改按钮的显示文字

代码示例 #

HTML结构

<textarea id="editContent"></textarea>
<button id="submitBtn">Send</button>

JavaScript 逻辑

// 获取页面元素
const textarea = document.getElementById('editContent');
const submitBtn = document.getElementById('submitBtn');

// 记录文本框初始内容
let initialText = textarea.value;

// 监听文本框输入事件
textarea.addEventListener('input', function() {
  // 对比当前内容与初始内容
  if (this.value !== initialText) {
    submitBtn.textContent = 'save changes';
  } else {
    // 内容恢复初始状态时切回原按钮文字
    submitBtn.textContent = 'Send';
  }
});

// 可选：点击按钮后重置基准值（比如保存操作完成后）
submitBtn.addEventListener('click', function() {
  // 这里可以添加你的保存逻辑
  initialText = textarea.value;
  submitBtn.textContent = 'Send';
});

额外提示 #

• 使用input事件能覆盖所有输入场景（键盘输入、粘贴、拖拽文本等），比keyup更可靠
• 如果需要忽略首尾空格的变化，可以在对比前对文本做trim()处理：this.value.trim() !== initialText.trim()

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