段落文本编辑功能故障：点击按钮输入框不显示问题排查

需要实现点击编辑按钮后，显示输入框修改段落文本，按下回车键保存并隐藏输入框。目前点击按钮时输入框不显示，但控制台能正常获取段落文本。

原始HTML代码 #

编辑按钮： #

<div class="item-edit" onclick="edit_about_me()">
    <div class="btn-edit ">
        <a href="#" class="btn-right">
            <i>
                <span class="material-symbols-outlined">edit</span>
            </i>
        </a>
    </div>
</div>

段落区域： #

<div class="about-p">
    <div class="p-container padding-horizontal">
        <p id="about-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt harum repellat quos optio atque pariatur earum culpa, quisquam dignissimos nulla, maxime mollitia assumenda saepe, quae obcaecati expedita consequatur alias corporis.</p>
        <input id="btn-edit-about" type="text" oninput="new_text(this.value)" style="display:none">
    </div>
</div>

原始JavaScript代码： #

function edit_about_me(){
    document.getElementById("btn-edit-about").style.display="block";
    let text = document.getElementById("about-text").innerText;
    console.log(text)
}
document.addEventListener("DOMContentLoaded", function() {
    const btnEdit = document.getElementById("btn-edit-about");
    if (btnEdit) {
        btnEdit.addEventListener("click", edit_about_me);
    }
});

function new_text(value){
    document.getElementById("about-text").innerText=value;
}

document.addEventListener('DOMContentLoaded', function() {
    let input = document.getElementById('btn-edit-about');
    if (input) {
        input.addEventListener('keyup', (e) => {
            if (e.code === "Enter") {
                console.log("Enter was press");
                let button = document.getElementById('btn-edit-about');
                if (button) {
                    button.style.display = "none";
                }
            }
        });
    }
}, false);

function showFile(input){
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(){
        document.getElementById('about-text').innerText=reader.result;
    };
    reader.onerror = function(){
        console.log(reader.error);
    }
}

问题分析 #

1. 错误的事件绑定：在DOMContentLoaded中给输入框btn-edit-about绑定了click事件触发edit_about_me函数，完全多余且无意义——edit_about_me应该由编辑按钮的点击触发，和输入框无关。
2. 输入框未填充原有文本：点击编辑按钮后，仅设置了输入框的display:block，但未将段落文本赋值给输入框，且可能因样式问题（如输入框宽度为0）导致看起来没显示。
3. 体验缺失：输入框显示后未自动获取焦点，编辑操作需要额外点击输入框。

修复后的代码 #

JavaScript部分： #

function edit_about_me(){
    const input = document.getElementById("btn-edit-about");
    const textEl = document.getElementById("about-text");
    // 显示输入框并填充原有文本
    input.style.display = "block";
    input.value = textEl.innerText;
    // 自动获取焦点，提升编辑体验
    input.focus();
}

function new_text(value){
    document.getElementById("about-text").innerText = value;
}

document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('btn-edit-about');
    if (input) {
        input.addEventListener('keyup', (e) => {
            if (e.code === "Enter") {
                // 回车后隐藏输入框
                input.style.display = "none";
            }
        });
    }
});

function showFile(input){
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(){
        document.getElementById('about-text').innerText = reader.result;
    };
    reader.onerror = function(){
        console.log(reader.error);
    }
}

可选样式优化： #

为让输入框显示时和段落样式一致，添加以下CSS：

#btn-edit-about {
    width: 100%;
    padding: 0;
    border: none;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    background: transparent;
}

修复说明 #

• 移除了输入框上错误绑定的click事件，避免逻辑干扰。
• 在edit_about_me中给输入框填充原有文本，并自动获取焦点，优化编辑流程。
• 简化回车保存逻辑，确保输入框正确隐藏。

内容的提问来源于stack exchange，提问作者Programmer-G