编辑模式下TextInput初始值无法同步至关联标签的JS问题求助

问题核心：添加表单模式下输入框输入时sc标签能同步显示，但编辑模式下输入框加载数据库旧值后，sc标签初始为空，且输入时无法同步初始值。

修正方案 #

将同步逻辑封装为独立函数，页面初始化时先执行一次同步（处理初始值），同时绑定keyup事件保持输入时的同步。此外，用DOMContentLoaded确保DOM元素加载完成后再执行脚本，避免元素未加载导致的获取失败。

修改后的代码 #

JavaScript 代码

document.addEventListener('DOMContentLoaded', function() {
    // 定义同步输入框值到标签的函数
    function syncInputToLabel() {
        const inputBox = document.getElementById('pn');
        const scLabel = document.getElementById('sc');
        scLabel.textContent = inputBox.value; // 用textContent替代innerHTML，更安全
    }

    // 页面加载完成后立即同步初始值
    syncInputToLabel();

    // 绑定keyup事件，输入时实时同步
    document.getElementById('pn').addEventListener('keyup', syncInputToLabel);
});

编辑模式 HTML 代码

<input type="text" style="text-transform:uppercase" id="pn" name="pn" value="Example">
<b><label style="text-transform:uppercase" id="sc"></label></b>

添加模式 HTML 代码（无需改动）

<input type="text" style="text-transform:uppercase" id="pn" name="pn">
<b><label style="text-transform:uppercase" id="sc"></label></b>

说明 #

1. textContent替代innerHTML：如果只是同步文本内容，textContent比innerHTML更安全，能避免潜在的XSS风险。
2. DOMContentLoaded事件：确保脚本在所有DOM元素加载完成后执行，防止出现document.getElementById返回null的情况。
3. 初始值同步：页面加载时主动调用syncInputToLabel，不管是添加模式的空值还是编辑模式的数据库旧值，都会同步到sc标签中。

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