是否可以用div替换textarea来读取FastAPI（或Flask）中的输入？

Question

我刚刚发现使用

<div contentEditable="true">

提供了一个自动扩展的输入文本区域，这似乎比

textarea

更适合我的目的。不幸的是，我无法使用 FastAPI 读取 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"> 
    <textarea  id="input" name="ta" rows="2">very
    long
    textarea
    text</textarea>
    <div name="da" contentEditable="true">
       even <br/> longer <br/> div <br/> area <br/> text <br/>
    </div>
    <input type="submit"/> 
    </form>"""


@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)

知道如何阅读

div

文字吗？使用 Flask 的可选解决方案对我来说可能没问题。

Answer 1

您面临的问题是由于 HTML 中的元素没有 name 属性，并且不被视为表单控件，因此提交表单时其内容不会包含在表单数据中。

如果您想从元素提交内容，您可以在提交表单时使用 JavaScript 将元素的内容复制到隐藏字段中。以下是如何执行此操作的示例：

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" onsubmit="copyContent()"> 
            <textarea id="input" name="ta" rows="2">very
            long
            textarea
            text</textarea>
            <div id="da" contentEditable="true">
            even <br/> longer <br/> div <br/> area <br/> text <br/>
            </div>
            <input type="hidden" id="hiddenInput" name="da">
            <input type="submit"/> 
        </form>

        <script>
        function copyContent() {
            var divContent = document.getElementById("da").innerText;
            document.getElementById("hiddenInput").value = divContent;
        }
        </script>
"""


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


@app.post("/form")
def form_post(form_data: SimpleModel = Depends()):
    ta = form_data.ta
    da = form_data.da
    print(":::::::::> ta")
    print(ta)
    print(":::::::::> da")
    print(da)
    return form_data


if __name__ == "__main__":
    uvicorn.run("main:app", reload=True)

提交表单时调用 JavaScript 函数 copyContent()。此函数将 id="da" 中的文本内容复制到 id="hiddenInput" 的隐藏字段中。隐藏的输入字段也有 name="da"，所以当提交表单时，它的值将包含在表单数据中。