textarea 相关问题

如何在JavaFX中从TextArea获取文本并保存换行符？

我有一个文本区域和其中的几行文本。当我通过 getText() 方法提取字符串时，我得到的是一行文本，而不是真正写的几行。那么我能做什么来区分每个

如何使用 C# 从文本区域获取用户输入

我试图获取用户在页面文本区域中输入的值，并将该值作为字符串存储在变量中。 我花了一个多小时研究各种不同的方法

文本区域中的文本颜色引导

日志 <div class="container"> <h2>Log</h2> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapseLog">Logger</a> </h4> </div> <div id="collapseLog" class="panel-collapse collapse"> <div class="panel-body"> <label for="comment">Log:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> </div> </div> </div> </div> 我正在尝试创建一个 WSocket 记录器，我正在尝试将字体颜色更改为绿色，将背景更改为灰色 以完美更改背景的方式执行此操作： textarea{ background-color:gray !important; } 但是如果我尝试设置文本字体颜色这样做： textarea{ background-color:gray !important; color: #fff; } 工作... 我怎样才能实现这个目标？ 谢谢！ 您应该在文本区域上使用更强的选择器来覆盖引导CSS。例如： #comment { color: #fff; } PS：显然你也可以在该行上使用 !important ，但它适用于极其罕见的情况，否则被认为是（非常）不好的做法。我想说，即使使用 #id 也有点过分了。 这是关于选择器特异性的一个很好的指南： 选择器的特点和优势 您还可以在“颜色”中添加 !important ： textarea { background-color:gray !important; color: #fff !important; }

textarea 调整宽度而不是高度，为什么？

这是我尝试过的： 我也尝试过用 px 或 % 设置高度，两者都...

HTML：有什么方法可以在文本区域中显示图像吗？

所以我也想在 中显示图像缩略图以及文本。如果你知道一个也很完美的 javascript 解决方案（如果可能的话在 vanilla JS 中）。 像这样： __________________ |你好</desc> <question vote="34"> <p>所以我也想在 <pre><code>image thumbnails</code></pre> 中与文本一起显示 <pre><code><textarea></code></pre>。如果你知道一个也很完美的 javascript 解决方案（如果可能的话在 vanilla JS 中）。</p> <p>像这样：</p> <pre><code>__________________ |Hello World | | _______ | | | Img | | | | | | | |_____| | |Hello again. | | _______ | | | Img2| | | | | | | |_____| | |________________| </code></pre> <p>据我所知并在 div 或任何具有 <pre><code>contentEditable="true"</code></pre> 的内容中看到也允许图像，但是，允许许多其他 HTML 标签和很多我不想要的东西：|</p> <p>我只想要 <pre><code>text</code></pre> 和 <pre><code>images</code></pre>。</p> </question> <answer tick="false" vote="74"> <p>使用具有 contentEditable 属性的 div，其作用类似于文本区域。这就是所见即所得编辑器的创建方式。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>div { width: 300px; height: 200px; border: 1px solid #ccc; }</code></pre> <pre><code><div contentEditable="true">Type here. You can insert images too <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" /> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="11"> <p>我知道你想编辑文本和图片，但是......为什么它必须在文本区域内？此类控件旨在保存纯文本。有许多用 JavaScript 编写的 HTML 编辑器：</p> <ul> <li><a href="http://ckeditor.com/" rel="noreferrer">http://ckeditor.com/</a></li> <li><a href="http://tinymce.moxiecode.com/" rel="noreferrer">http://tinymce.moxiecode.com/</a></li> <li><a href="http://www.openwebware.com/" rel="noreferrer">http://www.openwebware.com/</a></li> <li><a href="http://www.unverse.net/whizzywig-cross-browser-html-editor.html" rel="noreferrer">http://www.unverse.net/whizzywig-cross-browser-html-editor.html</a></li> <li><a href="http://www.htmlarea.com/" rel="noreferrer">http://www.htmlarea.com/</a></li> <li>...</li> </ul> </answer> <answer tick="false" vote="2"> <p>简短的回答是否定的，这是不可能的，抱歉。</p> </answer> <answer tick="false" vote="1"> <p>可以使用css为textarea设置背景图片，使用js设置文本</p> </answer> <answer tick="false" vote="0"> <p>您可以编写一个脚本（最好使用 PHP）来检查是否存在不需要的元素（<pre><code><p></code></pre> 或 <pre><code><img></code></pre> 除外）。</p> <p>然后您可以将用户发送回“表单”并让他再次填写，或者您可以删除整个不需要的标签。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>div { width: 300px; height: 200px; border: 1px solid #ccc; }</code></pre> <pre><code><div contentEditable="true">Type here. You can insert images too <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" /> </div></code></pre> </div> </div> <p></p> <p><a href="https://i.stack.imgur.com/gyqtr.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2d5cXRyLnBuZw==" alt=""/></a></p> </answer> </body></html>

MVC C# 网站应用程序中使用的文本区域中的换行符

我在 Visual Studio Web Dev 中使用 ASP.net MVC C#。我有几个文本区域，其中填充了数据，然后更新为数据库记录。 是否可以在

Textarea - 设置属性时出现问题

我正在保存一个div的innerHTML，其中包含多个表单输入，包括文本区域、选择和文本框。 我使用 onkeyup 或 onchange 处理程序和

JavaFX：从第一个窗口设置第二个窗口中的 TextArea 内容时出现空指针异常

我正在使用 JavaFX 并创建两个窗口应用程序，一个用于浏览文件，另一个用于显示其内容 问题是当我访问 inputText.setText(

如何以动态方式使<textarea>元素的一部分不可编辑？

我有一个 元素，用户可以在其中输入文本。我想创建一个条件，仅可以编辑文本区域中写入的最后 10 个字符。 例如用户写：M...</desc> <question vote="0"> <p>我有一个 <pre><code><textarea></code></pre> 元素，用户可以在其中输入文本。我想创建一个条件，仅可以编辑文本区域中写入的最后 10 个字符。</p> <p>例如用户写入：<pre><code>My name is Joe.</code></pre> 在这种情况下，用户只能编辑以下部分：<pre><code>me is Joe.</code></pre>。</p> <p>我也希望它是动态的，这意味着如果用户继续编写：<pre><code>My name is Joe. I am 30 years old.</code></pre>，那么可编辑部分将是：<pre><code>years old.</code></pre></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><div id="container"> <textarea id="inputText" name="inputText" wrap="soft"></textarea> </div></code></pre> </div> </div> <p></p> <p>有人对如何使用 JavaScript 实现这一点有建议吗？</p> </question> <answer tick="false" vote="0"> <p>这可以使用 JavaScript 来完成。您必须侦听该文本区域的“输入”事件（为了可靠，还必须侦听 onchange 事件）。当用户输入您的内容时，必须将该文本区域的状态保存到内存中的变量中，然后在每次输入后，您必须检查第一部分（不允许编辑）是否仍然匹配，如果不匹配，则将文本区域内容替换为您的已保存状态。</p> <p>让我展示一些代码的演示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var input = document.querySelector("#inputText"); var currentValue = ""; var restrictedLength = 0; input.addEventListener("input", function(){ var restrictedPart = currentValue.substr(0,restrictedLength ); var isAllowedEdit = input.value.length>=restrictedLength && input.value.substr(0,restrictedLength) == restrictedPart; if( isAllowedEdit ){ currentValue = input.value; var newRstrictedLength = currentValue.length-10; if( newRstrictedLength>=restrictedLength) { restrictedLength = newRstrictedLength; } } else { input.value = currentValue; } });</code></pre> <pre><code><div id="container"> <textarea id="inputText" name="inputText" wrap="soft"></textarea> </div></code></pre> </div> </div> <p></p> <p>请记住，这段代码只是一个想法，选择文本的一部分并粘贴内容（而不是逐个字母地书写）会产生一些奇怪的行为。您也应该考虑覆盖该部分。</p> </answer> </body></html>

如何使文本溢出：省略号在react.js + tailwind css 中的文本区域上工作

我遇到了文本溢出问题：在我的项目中，当在 div 上使用顺风截断以及文本内容被包装到 的组件时，省略号无法正常工作。文本溢出是 </desc> <question vote="0"> <p>我有一个文本溢出问题：在我的项目中，当在 div 上使用顺风截断以及文本内容被包装到 <pre><code><textarea/></code></pre> 的组件时，省略号无法正常工作。文本溢出已隐藏，但未显示 3 个点。</p> <p>这是一个简化的代码片段：</p> <pre><code><div onClick={someFunction} className="relative inline-block max-w-24 h-6 truncate"> <someComponent content={props.content} //this component is a read only textarea /> <div className="absolute left-0 right-0 top-0 bottom-0"></div> </div> </code></pre> <p>组件代码：</p> <pre><code><textarea className="inline-block text-inherit bg-inherit max-w-full max-h-full" defaultValue={props.content} readOnly={true} /> </code></pre> <p>我尝试了不同的显示，如<pre><code>display : inline, inline-block, block, flex</code></pre>等，以及用<pre><code>overflow: hidden; text-overflow: ellipsis; white-space: nowrap;</code></pre></p>替代顺风截断 </question> <answer tick="false" vote="0"> <p><a href="https://play.tailwindcss.com/Vhp6jQnyvh" rel="nofollow noreferrer">看起来</a>这不是<pre><code><textarea></code></pre>想要的行为方式。这个问题也在这里讨论过：<a href="https://stackoverflow.com/questions/40921849/text-overflow-ellipsis-not-work-on-textarea">text-overflow: ellipsis not work on TextArea</a></p> </answer> </body></html>

在 HTML 文本区域字段中强制执行最大字节数[重复]

我试图将文本区域中输入的 unicode 字符数限制为 500。 当我尝试发布表单并获取文本区域内容以在后端检查其长度时，我得到了双倍长度，

在 HTML 文本区域字段中强制执行最大字节数

我试图将文本区域中输入的 unicode 字符数限制为 500。 当我尝试发布表单并获取文本区域内容以在后端检查其长度时，我得到了双倍长度，

SwiftUI：如何删除 macOS 上的文本选择

我有两个简单的文本区域，其中包含文本： 导入 SwiftUI 结构ContentView：视图 { @State private var text1 = "Acing cipsusto dictumst ut nisim mincidunt bibendum nostra; tisi nis...

将 HTML5 文本区域内容保存到文件

有人可以帮我将 HTML5 textArea 的内容保存到文件中吗？最好使用 JavaScript？ 此处注释... 有人可以帮助我将 HTML5 textArea 的内容保存到文件中，最好使用 JavaScript 吗？ <textarea id="textArea"> Notes here... </textarea> <button type="button" value="save"> Save</button> 应该可以了。 function saveTextAsFile() { var textToWrite = document.getElementById('textArea').value; var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' }); var fileNameToSaveAs = "file.txt"; //filename.extension var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { // Chrome allows the link to be clicked without actually adding it to the DOM. downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { // Firefox requires the link to be added to the DOM before it can be clicked. downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); } var button = document.getElementById('save'); button.addEventListener('click', saveTextAsFile); function destroyClickedElement(event) { // remove the link from the DOM document.body.removeChild(event.target); } #textArea { display: block; width: 100%; } <textarea id="textArea" rows="3"> Notes here... </textarea> <button type="button" value="save" id="save">Save</button> JSFiddle 答案中代码的简化版本： function download(){ var text = document.getElementById("my-textarea").value; text = text.replace(/\n/g, "\r\n"); // To retain the Line breaks. var blob = new Blob([text], { type: "text/plain"}); var anchor = document.createElement("a"); anchor.download = "my-filename.txt"; anchor.href = window.URL.createObjectURL(blob); anchor.target ="_blank"; anchor.style.display = "none"; // just to be safe! document.body.appendChild(anchor); anchor.click(); document.body.removeChild(anchor); } 和 html： <textarea id="my-textarea"> Notes here... </textarea> <button type="button" onclick="download()">Save</button> 我测试了engincancan的答案，它几乎就在那里，但不完全是。首先，“ecc.plist”的文件格式在任何地方都无法识别。其次，为了使代码能够在 Safari、Chrome 和 Firefox 的桌面上运行，您必须使用现有的锚标记而不是创建锚标记 (document.createElement('a'))。 destroyClickedElement 方法仅适用于 Chrome，因为它是如此宽容和宽容。并且，为了使下载能够在 Firefox 中运行，您必须拥有 document.body.appendChild(downloadLink.download); 我还想将本地存储文本保存到文件中以供下载，并且代码可以在 Mac 上的 Safari、Chrome 和 Firefox 桌面上运行。但是，我认为在 iOS 中不可能使用 Chrome 或 Firefox 将 Blob() 保存在任何地方。它确实有效，有趣的是在 Safari 中。例如，我可以将文本文件保存到我的奇妙清单应用程序中。这是我在 Github 上的存储库的链接：Github gh-pages 上的猫语者 这是 JavaScript 代码： const fileDownloadButton = document.getElementById('save'); function localStorageToFile() { const csv = JSON.stringify(localStorage['autosave']); const csvAsBlob = new Blob([csv], {type: 'text/plain'}); const fileNameToSaveAs = 'local-storage.txt'; const downloadLink = document.getElementById('save'); downloadLink.download = fileNameToSaveAs; if (window.URL !== null) { // Chrome allows the link to be clicked without actually adding it to the DOM downloadLink.href = window.URL.createObjectURL(csvAsBlob); downloadLink.target = `_blank`; } else { downloadLink.href = window.URL.createObjectURL(csvAsBlob); downloadLink.target = `_blank`; downloadLink.style.display = 'none'; // add .download so works in Firefox desktop. document.body.appendChild(downloadLink.download); } downloadLink.click(); } // file download button event listener fileDownloadButton.addEventListener('click', localStorageToFile); <textarea id = "textArea"> Notes here... </textarea> <button onclick="savetextarea()" type="button">Save</button> <script> function savetextarea(){ var txt = document.getElementById("textArea").value; document.getElementById("saveinput").value = txt; document.forms["aForm"].submit(); } </script> <form action="savecontent" name="aForm"> <input id="saveinput" type="hidden" name="filecontent" value=""> </form>

如何在一次输入中将多个文本区域转换为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...