用户输入内容无法持久替换页面文本的技术问题求助

API 探路者

2026-8-24

解决消息传递页面提交后内容闪失/不显示问题

问题根源

你的提交按钮是表单的submit类型，点击后会触发浏览器默认的表单提交行为——页面自动刷新，导致你刚设置的内容瞬间被重置回初始状态，所以看起来就是闪一下就没了。

具体修复方案

方案一：阻止按钮点击的默认行为

修改JavaScript代码，在点击事件里添加event.preventDefault()阻断页面刷新：

const submit = document.getElementById('submitBtn');
let display = document.querySelector('.message-content');
let input = document.getElementById('message');

submit.addEventListener('click', function (event) { 
    // 阻止表单默认提交，避免页面刷新
    event.preventDefault();
    let inputValue = input.value;
    display.innerHTML = inputValue;
});

方案二：监听表单提交事件（更推荐）

这种方式能同时覆盖点击按钮和按回车提交两种场景，还可顺便加上空值校验：

const form = document.getElementById('message-form');
let display = document.querySelector('.message-content');
let input = document.getElementById('message');
let feedback = document.querySelector('.feedback');

form.addEventListener('submit', function (event) { 
    event.preventDefault();
    let inputValue = input.value.trim();
    
    // 空值校验，显示提示
    if (!inputValue) {
        feedback.classList.add('show');
        // 2秒后自动隐藏提示
        setTimeout(() => feedback.classList.remove('show'), 2000);
        return;
    }
    
    // 更新显示内容
    display.innerHTML = inputValue;
    // 清空输入框
    input.value = '';
});