如何获取设置contentEditable的fieldset元素中的内容？

你用fieldset替代textarea做可编辑笔记，没法直接用.value取内容的核心原因是：fieldset不属于input、textarea这类标准表单控件，本身没有value属性。但你已经给fieldset设置了contentEditable = true，完全可以通过以下几种方式直接获取它的文本内容：

可用的获取方式 #

• textContent：获取元素内所有纯文本内容，保留换行、空格等结构，不包含HTML标签
• innerText：获取元素内可见的文本内容，会忽略被样式隐藏的文本，和用户实际看到的内容一致
• innerHTML：获取包含HTML标签的完整内容，如果用户编辑时自动生成了标签（比如换行转为<br>），可以用这个获取带格式的内容

修改后的代码示例 #

你的原代码在创建fieldset后立刻获取内容（此时用户还没输入），而且元素访问逻辑有误，应该给按钮绑定点击事件，等用户输入完成后再获取内容：

const write = document.querySelector("#write");
const button = document.createElement("button");
button.textContent = "保存笔记";

write.addEventListener("click", function (e){
    e.preventDefault();
    const page = document.createElement("form");
    const fieldset = document.createElement("fieldset");
    page.action = "./nowhere";
    fieldset.contentEditable = true;
    fieldset.id = "text";
    fieldset.name = "text";
    
    // 给按钮添加获取内容的逻辑
    button.addEventListener('click', function() {
        // 这里选textContent，根据需求可替换为innerText或innerHTML
        const myText = fieldset.textContent; 
        console.log("笔记内容：", myText);
        // 此处可添加保存逻辑，比如存入本地存储或提交到后端
    });

    page.append(fieldset);
    page.append(button);
    write.append(page);
})

额外补充：表单提交时携带内容 #

如果需要在表单提交时自动带上fieldset的内容，也不用额外加input，直接在表单提交事件里手动把内容加入FormData即可：

page.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const fieldsetContent = fieldset.textContent;
    formData.append('text', fieldsetContent);
    // 后续提交formData即可
});

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