textarea 相关问题

如何在一次输入中将多个文本区域转换为html段落？

我有一段代码可以生成带有文本的新文本区域，并将其保存为输入中的 html 段落 ()，但我的代码无法保存多个文本区域，当我尝试执行此操作时，我只得到未定义的 我有一段代码可以生成带有文本的新文本区域，并将其保存为输入中的 html 段落 (<p>)，但我的代码无法保存多个文本区域，当我尝试执行此操作时，我只得到 undefined 输出。 有一个选项可以保存多个文本区域吗？ 这是我的代码： (function () { var textbox = document.getElementById('textbox'); var txtBtn = document.getElementById('addTxt'); var webB = document.getElementById('webB'); var currentIndex = 0; txtBtn.addEventListener("click", createTxt); function createTxt() { var txtTyper = document.createElement('textarea'); txtTyper.innerText = 'Type text here'; txtTyper.id = 'txtTyper'; webB.appendChild(txtTyper); txtTyper.style.cursor = 'auto'; let count = 0; var txtTypers = document.querySelectorAll("#txtTyper"); txtTypers.forEach((element, currentIndex) => { count = count + 1; element.classList.add(`Typer-${count}`); }); } setInterval(function addValue() { var txtTyperw = document.querySelectorAll("#txtTyper"); textbox.value ='<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>'; }, 0001); })(); <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/> <div class="btnP"> <button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button> </div> <input style="height:50px;width:100%" id="textbox"> <div class="webB" id="webB"> </div> CodePen：https://codepen.io/Puma-Murca/pen/XWOYxGK 注意：我是 JavaScript 初学者，我正在使用外部库（Bootstrap），因此我需要不使用 jQuery 的答案。 querySelectorAll返回一个NodeList，而不是单个节点 也许是这样的？ 注意，使用 requestAnimationFrame 而不是 setInterval - 这意味着它仅在“视觉上”需要时调用 addValue (function () { var textbox = document.getElementById('textbox'); var txtBtn = document.getElementById('addTxt'); var webB = document.getElementById('webB'); var currentIndex = 0; txtBtn.addEventListener("click", createTxt); function createTxt() { var txtTyper = document.createElement('textarea'); txtTyper.innerText = 'Type text here'; txtTyper.className = 'txtTyper'; webB.appendChild(txtTyper); txtTyper.style.cursor = 'auto'; let count = 0; var txtTypers = document.querySelectorAll("#txtTyper"); txtTypers.forEach((element, currentIndex) => { count = count + 1; element.classList.add(`Typer-${count}`); }); } const addValue = () => { textbox.value = [...document.querySelectorAll(".txtTyper")] .map(txtTyperw => '<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>'); requestAnimationFrame(addValue); } addValue(); })(); <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" /> <div class="btnP"> <button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button> </div> <input style="height:50px;width:100%" id="textbox"> <div class="webB" id="webB"> </div>

如何在 Material-UI 中设置 TextAreaAutoSize 组件的宽度？

我在任何地方都找不到有关如何更改material-ui 中 TextAreaAutosize 组件的默认宽度的任何信息。 看来唯一的选择就是拥有这个小盒子。有谁知道更好的...

如何知道文本区域是否正在主动调整大小

我正在寻找一个 javascript 函数，如果给定的 textarea 元素正在调整大小，则该函数将返回 true，如果没有，则返回 false。这个功能是否存在，不使用JQuery或任何其他...

在React输入元素中按tab键时如何输入空格的tab大小？

我想在React元素的或<input>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，而其他反应元素被指向。 我怎样才能...</desc> <question vote="0"> <p>我想在React元素的<pre><code><textarea></code></pre>或<pre><code><input></code></pre>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，并且其他反应元素被指向。</p> <p>如何捕获此事件并将焦点保持在文本区域或输入，并将制表符大小的空格添加到当前光标位置？</p> <p>我试图喜欢这个，但没有帮助。</p> <pre><code>const import { useState } from "react"; import ReactDOM from "react-dom/client"; function Car() { const [brand, setBrand] = useState("Ford"); const [description, setDescription] = useState("It's a red color Mustang from 1964"); const setCarBrand = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setBrand(e.target.value); e.preventDefault(); } const setCarDescription = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setDescription(e.target.value); e.preventDefault(); } return ( <> <h1>My {brand}</h1> <p> {description} </p> <br/> <label>{brand}: <label/> <input id="brand" placeholder={brand} value={brand} onChange={setCarBrand} /> <label>{description} : <label/> <textarea id="description" placeholder={description} value={description} onChange={() => setCarDescription()} /> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />); </code></pre> </question> <answer tick="false" vote="0"> <p>您可以在 setCarBrand 和 setCarDescription 函数中添加此代码。</p> <pre><code>if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var target = e.target; var value = target.value; // set textarea value to: text before caret + tab + text after caret target.value = value.substring(0, start) + "\t" + value.substring(end); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } </code></pre> </answer> </body></html>

我可以设置文本区域的大小调整抓取器的样式吗？

我的设计师刚刚给了我带有带有样式调整大小抓取器的文本区域的设计。问题是：我可以设计它吗？

如何使用tailwindcss将summernote嵌入到asp.net项目中

我正在尝试将 Summernote 嵌入到我的项目中，并且我正在使用 tailwindcss。我按照指南将 SummerNote 安装到项目中，但它仍然不起作用。 我将这些行添加到我的 _Layout.c...

保留文本区域中的换行符

我有一个带有文本区域的表单，我想在输出内容时保留用户输入的换行符。 例如，如果我在 textarea 中写入： 这里有一句话。这是另一个。她...

如何确保 Textarea 字段的高度和宽度都增长？

我是网络开发的初学者，我正在开发一个网站，并且有一个 Textarea 字段，我想用它来允许用户编写更长的文本。我应用了 CSS 样式来让这个领域在他身上成长......

如何像输入字段一样设置文本区域的样式

我在设置文本区域样式时遇到问题，我使用 bootstrap 4 css 我试图自己设计样式，但如果我使用填充或边距，它会使文本区域高度变大 .评论框{ 爸...

textarea 内的 HTML5 富文本 [关闭]

我听说新的 HTML5 将为文本区域添加富文本功能（这将使它们更加灵活），因此您可以执行诸如代码语法突出显示编辑器之类的操作，而无需非常讨厌的 JavaScript（例如

如何防止在输入字段中添加脚本

我需要防止在输入字段中添加脚本。有什么方法可以防止在文本字段/文本区域中添加 javascript 代码吗？ 函数过滤器（$事件）{ var 正则表达式 = /[^a-zA-Z0-9_]/; 让

CKeditor 5 文本区域未更新

所以我有一个 CKeditor 5 文本区域，当我单击提交按钮时，它会运行获取文本区域，并且为了这个示例，将其作为更改而触发。然而问题是它会引发什么......

Selenium with python 无法本地化 IFRAME 框中的区域文本

我正在将 Selenium 与 python 一起使用，并一直尝试单击文本区域并修改消息描述。文本框的 HTML 如下所示： 当我尝试使用此代码时出现错误： 硒。

selinium with python 无法本地化 ifram 框中的区域文本

我正在使用 Selenium 和 python，并一直在尝试单击文本区域，并修改消息描述。文本框的 HTML 如下所示： 在此输入图像描述 当我尝试时出现错误

javaFX 中插入符相对于屏幕坐标的位置

我正在尝试找到一种方法来获取JavaFX中文本区域中插入符位置的相应屏幕位置。我需要在插入符号位置的文本中显示弹出窗口的位置。 我找到了请求...

使用 ViewBag asp.net mvc core 填充文本区域

我有这个文本区域尚未填充。 viewbag 不为空，因为如果我填充文本框，则会显示 @ViewBag.JobsDetails.job_description 中的信息。它只是不...

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>

是否可以用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"，所以当提交表单时，它的值将包含在表单数据中。

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

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

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

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