textarea 相关问题

我阅读了w3schools和MDN来了解的wrap属性是如何工作的。我在这里看到一个问题解释了软包装和硬包装之间的区别，但我无法理解。谁都可以吗</desc> <question vote="0"> <p>我阅读了 <a href="https://www.w3schools.com/tags/att_textarea_wrap.asp" rel="nofollow noreferrer">w3schools</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap" rel="nofollow noreferrer">MDN</a> 以了解 <pre><code>wrap</code></pre> 的 <pre><code><textarea></code></pre> 属性如何工作。我在这里看到一个问题解释了软包装和硬包装之间的区别，但我无法理解。谁能用更简单的方式向我解释一下？</p> </question> <answer tick="true" vote="0"> <p><pre><code>wrap: hard</code></pre> 将长单词分解为较小的单词（如果设置了 <pre><code>cols</code></pre> 属性 - 这将是较小单词的长度）</p> <p><strong>包裹：硬</strong></p> <p>例如，此表单将有输出 <pre><code>WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW W</code></pre> :</p> <pre><code><form> <textarea cols="10" wrap="hard"> WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW </textarea> <input type="submit"> </form> </code></pre> <p><strong>包装：柔软</strong></p> <p>使用 <pre><code>wrap: soft</code></pre> 它将有以下输出（与值相同）： <pre><code>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</code></pre></p> <p><strong>换行：关闭</strong></p> <p>还有选项<pre><code>wrap: off</code></pre>，这意味着什么都不会被分割成更多行。将添加滚动条。它对输出没有任何变化，就像<pre><code>wrap: soft</code></pre>：<pre><code>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</code></pre></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><textarea wrap="off"> WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW </textarea></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>尝试使用图形输入。当输入字段大小超出时，您应该注意到差异。例如：</p> <pre><code><textarea wrap="hard" cols="20"></textarea> </code></pre> <p>每 80 个字符将开始新行。请注意，并非所有地方都支持它/</p> <pre><code><textarea wrap="soft" cols="20"></textarea> </code></pre> <p>一旦超过显示宽度，将开始新行。 <br/> 您还可以通过 <pre><code>wrap="off"</code></pre></p> 禁用换行 <p>用于玩的代码 spinnet（看看 @Arnav Katyal 的答案）：<br/> <a href="https://stackoverflow.com/questions/1995370/adding-line-numbers-to-html-textarea">向 HTML 文本区域添加行号</a></p> </answer> </body></html>

html textarea word-wrap

回答 0 投票 0

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

我刚刚发现使用提供了一个自动扩展的文本区域用于输入，这似乎比文本区域更适合我的目的。我刚刚发现使用 <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 的可选解决方案对我来说可能没问题。您面临的问题是由于 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"，所以当提交表单时，它的值将包含在表单数据中。

html flask input textarea fastapi

回答 1 投票 0

如何将textarea的内容获取到单独的JavaScript文件？

是否可以以某种方式将 textarea 元素的内容获取到单独的 JavaScript 文件，而不将 JavaScript 文件插入到 HTML 代码中？我无法将 JavaScript 文件插入...

javascript html textarea

回答 1 投票 0

Asp.net ajaxToolkit：HtmlEditorExtender富文本编辑器不会发送整个消息

我有一个asp.net项目，我想做的是使textarea成为富文本编辑器，为此我使用ajaxToolkit：HtmlEditorExtender。问题是，当我在文本中输入一些文本时...

c# asp.net textarea richtextbox aspx-user-control

回答 1 投票 0

使用 jQuery 选择器和 setSelectionRange 不是函数

我在下面组装了一个基本的小提琴。由于某种原因，我的选择器可以检索文本区域框来设置值，但选择器无法使用 setSelectionRange 函数。在

javascript jquery textarea

回答 5 投票 0

可滚动文本区域在文本剪切上跳跃

我有一个具有以下样式的文本区域：文本区域{ 宽度：300px；最小高度：105px；最大高度：500px；溢出-y：自动；行高：20px； } 当我选择文本并向下滚动时...

javascript html css textarea caret

回答 1 投票 0

如何使html编辑器禁用或只读

我的网页上有 html 编辑器，但我希望它不可编辑。怎么做？ <p>我的网页上有 html 编辑器，但我希望它不可编辑。怎么办？</p> <pre><code><text area name="content" id="editor"></text area> <script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor"> </code></pre> <p>这是我尝试过的代码，我确实得到了完美的html编辑器，但我希望它只能在按钮上编辑，然后才能禁用或只读（不可编辑）。</p> </question> <answer tick="false" vote="0"> <p>如果您可以将 css 类更改为 html 元素，则此解决方案可能是您的选择：</p> <p>您可以将包装 div 添加到文本区域和脚本中：</p> <pre><code> <div id="parent-container" class="handle-no-events"> <textarea name="content" id="editor"></textarea> <script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor"></script> </div> </code></pre> <p>应用示例类“handle-no-event”将阻止对父容器子元素进行任何编辑，您可以再次切换或应用它以启用/禁用编辑器上的输入。</p> <p>这里是handle-no-events类里面的内容</p> <pre><code> .handle-no-events { pointer-events: none; } </code></pre> </answer> </body></html>

javascript textarea html-editor

回答 0 投票 0

如何使用按钮将 <input> 和 <textarea> 字段清除为 <type="text">？

过去三周我一直在为一个学校项目使用 HTML、CSS 和当前的 JavaScript 开发一个网站。在“联系我们”页面上，我有一个“表单”（未定义为

javascript html button input textarea

回答 1 投票 0

如何修复 Chrome 浏览器中单击 Alt 键时文本区域自动格式化的问题

我的 Chrome 浏览器有一些问题。在文本区域编辑器中，我输入带有换行符和段落的数据。当我单击左侧 Alt 键盘时，它会自动重新格式化段落。我想禁用

google-chrome browser textarea

回答 1 投票 0

使用 html textarea - Chome（Windows）有问题，但 Firefox 没有问题

我在 HTML 页面中有以下代码： <p>我在 HTML 页面中有此代码：</p> <pre><code> <textarea id="exwords" name="exwords" rows="11" cols="40" style="font-family:Courier;pre-wrap" oninput="this.value = this.value.toUpperCase()"></textarea> </code></pre> <p>如果我用文本填充文本区域 - 说 <pre><code>ABC DEF GHI JKL MNO</code></pre> 然后返回并尝试将 <pre><code>ABC</code></pre> 更改为 <pre><code>ABC123</code></pre> <pre><code>1</code></pre> 将在 <pre><code>C</code></pre> 之后输入，但 <pre><code>23</code></pre> 将在 <pre><code>MNO</code></pre> 之后输入.</p> <p>Windows 11 版本 117.0.5938.63 上的 Google Chrome 再次出现这种情况，我已更新到今天早上，但此问题没有任何变化。</p> <p>如果我在同一 Windows 系统上尝试使用最新的 Firefox，则会如预期那样在 <pre><code>123</code></pre> 之后输入 <pre><code>ABC</code></pre>。</p> <p>我不知道现在该去哪里 - 寻求建议。</p> </question> <answer tick="false" vote="0"> <p>当您尝试更改文本时，您似乎遇到了 Google Chrome 和 Firefox 如何处理文本区域的 <pre><code>oninput</code></pre> 事件的问题。在您的情况下，您希望在键入时将文本转换为大写，但您在 Chrome 中遇到了意外行为。</p> <p>为了确保不同浏览器之间的行为一致，您可以按如下方式修改代码：</p> <pre><code><textarea id="exwords" name="exwords" rows="11" cols="40" style="font-family: Courier; white-space: pre-wrap;" oninput="this.value = this.value.toUpperCase();"></textarea> </code></pre> <p>我对您的代码做了两处更改：</p> <ol> <li><p>我添加了<pre><code>white-space: pre-wrap</code></pre>；到内联样式。此 CSS 属性可确保在文本区域中保留空格（包括换行符），类似于 <pre><code>pre-wrap</code></pre> 属性中的 <pre><code>style</code></pre>。</p> </li> <li><p>我将 <pre><code>oninput</code></pre> 属性直接移至 textarea 元素，以保持事件处理程序在浏览器之间保持一致。</p> </li> </ol> <p>通过进行这些更改，在文本区域中输入和修改文本时，您应该在 Chrome 和 Firefox 中获得一致的体验。</p> </answer> </body></html>

html textarea

回答 0 投票 0

textarea 相关问题

最新问题