修改textarea的innerHTML后如何保留其绑定的事件监听器

核心问题原因 #

textarea 是表单输入控件，值的读写必须使用 value 属性，你使用 innerHTML 给 textarea 赋值时会直接修改元素内部的 DOM 结构，导致预先绑定的 input 事件监听器被销毁，自然就会出现事件失效、双向同步失效的问题。

修复代码 #

修改后的JS逻辑 #

// 先提前获取对应DOM元素，避免重复查询
const inputColor = document.querySelector('#inputColor');
const inputColorPicker = inputColor.querySelector('input[type="color"]');
const colorTextarea = inputColor.querySelector('textarea');
const mySVG = document.querySelector('svg'); // 替换为你实际的SVG选择器

// 颜色选择器输入同步
inputColorPicker.addEventListener('input', () => {
    // 核心修改：将innerHTML改为value
    colorTextarea.value = inputColorPicker.value;
    changeSVGColor(inputColorPicker.value);
});

// 文本框输入同步
colorTextarea.addEventListener('input', () => {
    const inputHex = colorTextarea.value.trim();
    // 新增十六进制色值校验，避免非法值导致同步异常
    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(inputHex)) {
        inputColorPicker.value = inputHex;
        changeSVGColor(inputHex);
    }
});

function changeSVGColor(hex) {
    if (mySVG) {
        mySVG.style.fill = hex;
    }
}

可选优化（DOM加载时机问题规避） #

如果你的JS代码是放在 <head> 标签内引入的，需要把所有逻辑包裹在 DOMContentLoaded 事件回调中，避免DOM还未渲染完成就获取元素绑定事件，导致绑定失效：

document.addEventListener('DOMContentLoaded', () => {
    // 把上面所有JS逻辑放在这里执行
});

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