能否用contenteditable的div替换textarea在FastAPI或Flask中读取输入？

浏览器默认只会提交表单控件（如input、textarea）的数据，<div contentEditable="true">不属于标准表单控件，因此表单提交时不会自动携带其内容。解决思路是通过JavaScript将div的内容同步到一个隐藏的input元素中，让表单提交时带上这个数据。

FastAPI 解决方案 #

修改前端HTML代码，添加隐藏input并通过JS同步div内容：

from dataclasses import dataclass

import uvicorn
from fastapi import Depends, FastAPI, Form
from starlette.responses import HTMLResponse

app = FastAPI()


@app.get('/form', response_class=HTMLResponse)
def form_get():
    return """<form method="post" id="myForm"> 
    <textarea  id="input" name="ta" rows="2">very
    long
    textarea
    text</textarea>
    <div id="editableDiv" contentEditable="true">
       even <br/> longer <br/> div <br/> area <br/> text <br/>
    </div>
    <!-- 隐藏input用于存储div内容 -->
    <input type="hidden" name="da" id="hiddenDa">
    <input type="submit"/> 
    </form>
    <script>
        // 监听表单提交事件，同步div内容到隐藏input
        document.getElementById('myForm').addEventListener('submit', function(e) {
            const divContent = document.getElementById('editableDiv').innerHTML;
            // 如果需要纯文本而非HTML，改用textContent：
            // const divContent = document.getElementById('editableDiv').textContent;
            document.getElementById('hiddenDa').value = divContent;
        });
        
        // 可选：实时同步div内容到隐藏input（非必须，提交时同步即可）
        document.getElementById('editableDiv').addEventListener('input', function() {
            const divContent = this.innerHTML;
            document.getElementById('hiddenDa').value = divContent;
        });
    </script>"""


@dataclass
class SimpleModel:
    ta: str = Form(None)
    da: str = Form(None)


@app.post('/form')
def form_post(form_data: SimpleModel = Depends()):
    print(f'form_data: {form_data}')
    return form_data


if __name__ == '__main__':
    uvicorn.run(app)

后端代码无需修改，原有的SimpleModel和form_post函数可直接接收da参数。

Flask 解决方案 #

前端部分与FastAPI完全一致，后端实现如下：

from flask import Flask, request

app = Flask(__name__)

@app.route('/form', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        ta_content = request.form.get('ta')
        da_content = request.form.get('da')
        print(f'ta: {ta_content}, da: {da_content}')
        return {'ta': ta_content, 'da': da_content}
    
    # GET请求返回表单页面
    return """<form method="post" id="myForm"> 
    <textarea  id="input" name="ta" rows="2">very
    long
    textarea
    text</textarea>
    <div id="editableDiv" contentEditable="true">
       even <br/> longer <br/> div <br/> area <br/> text <br/>
    </div>
    <input type="hidden" name="da" id="hiddenDa">
    <input type="submit"/> 
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function(e) {
            const divContent = document.getElementById('editableDiv').innerHTML;
            // 如需纯文本替换为：document.getElementById('editableDiv').textContent
            document.getElementById('hiddenDa').value = divContent;
        });
    </script>"""

if __name__ == '__main__':
    app.run(debug=True)

注意事项 #

• 若需要获取纯文本而非HTML格式内容，将innerHTML替换为textContent即可。
• 实时同步的input事件监听为可选操作，仅在提交时同步已能满足基本需求。

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