textarea 相关问题

在 Javascript 中删除或隐藏文本区域中的 html 标签

我使用 json 检索了文本区域的主体，但由于之前设置了一些样式，文本似乎带有 html 标签。 我怎样才能在新的文本上显示这些文本行......

Streamlit - 使用选定的文本作为按钮单击时的输入

Streamlit 有没有办法： 选择文本区域中的文本 单击按钮可将所选文本用作后端函数的输入 我看不出有什么办法可以做到这一点。谢谢。 研究并

为什么 JavaFX TextArea 中的 selectRange() 有时不突出显示所选内容？

我在我的JavaFX主类中编写了以下代码： 包jfxTest； 导入 java.util.Random; 导入javafx.application.Application； 导入javafx.scene.Scene； 导入javafx.scene.control。

为什么 'white-space:normal' 属性没有按 <textarea> 中的预期工作？

我知道使用white-space:normal可以将多个空格折叠成一个，但它似乎在Google浏览器中不起作用。 这是我的代码。 我知道使用空白：正常可以将多个空格折叠为一个，但它似乎在谷歌浏览器中不起作用。 这是我的代码。 <div> <label style="display: block;" for="textarea6">white-space: normal</label> <textarea id="textarea6" name="textarea6" rows="5" cols="33" style="white-space: normal;">j jj jjj </textarea> <p style="white-space: normal;">j jj jjj </p> </div> 像这样。 下面列出了所有 CSS 样式。 element.style { white-space: normal; } textarea { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-weight: ; font-stretch: ; font-size: ; font-family: monospace; font-optical-sizing: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; text-rendering: auto; color: fieldtext; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; appearance: auto; -webkit-rtl-ordering: logical; resize: auto; cursor: text; white-space-collapse: preserve; text-wrap: wrap; overflow-wrap: break-word; background-color: field; column-count: initial !important; writing-mode: horizontal-tb !important; margin: 0em; border-width: 1px; border-style: solid; border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); border-image: initial; padding: 2px; } 怎样才能达到预期的“white-space：normal”效果？ 这个white-space-collapse: preserve;来自哪里？那就是保留空格字符。如果您删除它或可能用 white-space-collapse: collapse; 覆盖它，它应该可以工作。

使用VueJS自动调整Textarea大小的问题

我试图让文本区域在文本值更改时自动调整其高度： 我用的是手表...

如何在 html 文本区域中显示以下文本？

我有一个如下所示的字符串。请看一下： 我把它作为图像，这里也不显示。如果我将该字符串放在这里，它就会变成以下内容： 21154537878887GHE\u0044\u0...

React JS - 使用文本区域控件并尝试在 onChange 事件触发时保留以前的文本

在我的 React 组件中，我有 textarea 作为输入控件。该控件显示存储在数据库列中的文本。用户可以从前端完全或部分更新该内容并更新...

array.reverse() 在生产中不起作用

我不知道为什么，当我与我的文本区域交互时，我的_messagesList每次都是反向ASC和DESC。 我不知道为什么，当我与我的文本区域交互时，我的_messagesList每次都是反向ASC和DESC。 <div class="chat__messages"> <div *ngFor="let message of authService._messagesList.reverse()" [@fadeInOut] class="message" [ngClass]="session.User.id == message.Id_Sender ? 'myMsg' : 'otherMsg'"> <p>{{message.Content}}</p> <span>{{message.createdAt | date: "HH:mm"}}</span> </div> <span class="loader" *ngIf="isLoading"></span> </div> <div class="chat__send"> <textarea #textarea (input)="adjustTextareaHeight()" rows="1" [(ngModel)]="_content" (keydown.enter)="sendMessage();$event.preventDefault()" placeholder="Envoyer un message"></textarea> <button (click)="sendMessage()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg></button> </div> 编辑：与“authService._messagesList.slice().reverse()”一起使用，但我现在不知道为什么。 如果有人可以给我解释一下 相反的方法在模板中不起作用 将逻辑代码中的数组反转，然后将数组传递给 ngFor

Shift + Enter 仅适用于桌面

我有一个 React 聊天应用程序，我使用文本区域作为消息输入，因为我需要多行支持。在移动设备上，这非常有效，因为当用户按下 Enter 时，它会开始一个新的 li...

突出显示文本并在文本区域的编辑器中打印它

我想要代码javeenter图像描述在这里 突出显示文本并在编辑器中打印它 就像这张图片中一样 我的分区 document.getElementById("postText") 图片描述在这里](https://i.

Bootstrap 使文本区域高度与窗口高度匹配

我见过很多关于如何使 Textarea 高度为 100% 的不同回复。据我所知，在文本区域上使用“高度：100％”会自动将其调整为容器的高度。我正在使用引导程序 4

jodit 的多文本区域

我有超过 15 个编辑器，想要将它们显示在一页上（HTML/CSS/JS）。 此 Jodit 只能与一位编辑器配合使用，但不能与多个编辑器配合使用。 我希望所有编辑都能工作。 瑟...

添加新行时使设置高度的文本区域变大

我有一个固定高度为 70px 的文本区域。当我多次按 Enter 键换行时，我想让文本区域的高度增长。目前，在第 6 行之后出现了一个滚动条...

向 HTML 文本区域添加行号

我有一个 元素，如下面的代码所示。如何在其左边距显示行号？ <TEXTAREA name="program" id="program" rows="15" ...</desc> <question vote="66"> <p>我有一个 <pre><code><textarea></code></pre> 元素，如下面的代码所示。如何在其左边距显示行号？</p> <pre><code><TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA> </code></pre> </question> <answer tick="false" vote="19"> <p>这是一个非常简单但有效的技巧。它会插入已添加行号的图像。</p> <p>唯一的问题是您可能需要创建自己的图像来匹配您的 UI 设计。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>textarea.numbered { background: url(http://i.imgur.com/2cOaJ.png); background-attachment: local; background-repeat: no-repeat; padding-left: 35px; padding-top: 10px; border-color:#ccc; }</code></pre> <pre><code><textarea cols="50" rows="10" class="numbered"></textarea></code></pre> </div> </div> <p></p> <p>感谢：<a href="https://jsfiddle.net/vaakash/5TF5h/" rel="nofollow noreferrer">Aakash Chakravarthy</a></p> </answer> <answer tick="false" vote="17"> <h2>TLDR：使用 CodeMirror </h2> <p>这里有人推荐了<a href="https://codemirror.net/" rel="noreferrer">CodeMirror</a>，我强烈推荐它！但这个答案并没有真正提供任何技术细节。</p> <p>其他解决方案：我在这里尝试的所有其他解决方案都存在行号与行不匹配的问题。我相信这是因为我的显示器 DPI（每英寸点数）为 120%，而这些解决方案没有考虑到这一点。</p> <p><em>那么，如何使用CodeMirror???</em> 简单！ <a href="https://codemirror.net/doc/manual.html" rel="noreferrer"><em>看看文档的 21,000 字即可！</em></a>我希望在不到一两页的时间内解释您 99% 的问题。</p> <h2>演示一下！</h2> <p>100% 工作演示，并且在 StackOverflow 沙箱中完美运行：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', theme: 'abbott', });</code></pre> <pre><code><script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"></link> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css"></link> <textarea id="code" name="code"> if($cool_variable) { doTheCoolThing(); # it's PRETTY cool, imho }</textarea></code></pre> </div> </div> <p></p> <h2>特点！</h2> <ul> <li>插入/覆盖模式。</li> <li>多行同时缩进。</li> <li>大量主题。</li> </ul> <h2>TLDR：如何在一页或更少的内容中使用 CodeMirror </h2> <h3>第 1 步 - 加载基本核心库</h3> <p>将此添加到您的<pre><code><head></code></pre>块...</p> <pre><code><script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/lib/codemirror.js"></script> <link rel="stylesheet" type="text/css" href="/static/js/codemirror-5.62.0/lib/codemirror.css"></link> </code></pre> <p>并且，如果您喜欢额外的括号颜色匹配，还可以加载此：</p> <pre><code><script language="javascript" type="text/javascript" src="/codemirror-5.62.0/addon/edit/matchbrackets.js"></script> </code></pre> <h3>第 2 步 - 设置语法突出显示</h3> <p>检查 <pre><code>/codemirror-5.62.0/mode/</code></pre> 目录以查看哪种语言与您将要编码的语言相匹配。该领域有 <em>广泛的支持</em>。</p> <p>将此添加到您的<pre><code><head></code></pre>块...</p> <pre><code><script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/mode/perl/perl.js"></script> </code></pre> <h3>第 3 步 - 初始化并显示 CodeMirror </h3> <p>有一些文本区域可以使用......</p> <pre><code><textarea id="code" name="code"></textarea> </code></pre> <p>在 JS 中初始化并设置您的代码镜像。您需要使用 Mimetype 来指示您要使用的模式，在本例中，我指示 Perl Mimetype...</p> <pre><code>var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', matchBrackets: true, }); </code></pre> <h3>第 4 步 - 选择主题</h3> <p>选择一些你喜欢的主题，<pre><code>'liquibyte'</code></pre>、<pre><code>'cobalt'</code></pre>和<pre><code>'abbott'</code></pre>都是相当不错的深色模式主题。定义 <pre><code>editor</code></pre>...</p> 后运行此命令 <pre><code>editor.setOption('theme', 'cobalt'); </code></pre> <p><em><strong>就是这样！</strong></em></p> </answer> <answer tick="false" vote="13"> <p>没有人尝试使用 HTML5 Canvas 对象并在其上绘制行号来做到这一点。所以我设法将画布和文本区域一个挨着一个放置，并在画布上绘制数字。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>// // desc: demonstrates textarea line numbers using canvas paint // auth: nikola bozovic <nigerija@gmail> // var TextAreaLineNumbersWithCanvas = function() { var div = document.getElementById('wrapper'); var cssTable = 'padding:0px 0px 0px 0px!important; margin:0px 0px 0px 0px!important; font-size:1px;line-height:0px; width:auto;'; var cssTd1 = 'border:1px #345 solid; border-right:0px; vertical-align:top; width:1px; background: #303030'; var cssTd2 = 'border:1px #345 solid; border-left:0px; vertical-align:top;'; var cssButton = 'width:120px; height:40px; border:1px solid #333 !important; border-bottom-color: #484!important; color:#ffe; background-color:#222;'; var cssCanvas = 'border:0px; background-color:#1c1c20; margin-top:0px; padding-top:0px;'; // LAYOUT (table 2 panels) var table = document.createElement('table'); table.setAttribute('cellspacing', '0'); table.setAttribute('cellpadding', '0'); table.setAttribute('style', cssTable); var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.setAttribute('style', cssTd1); var td2 = document.createElement('td'); td2.setAttribute('style', cssTd2); tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); // TEXTAREA var ta = this.evalnode = document.getElementById('mytextarea'); // TEXTAREA NUMBERS (Canvas) var canvas = document.createElement('canvas'); canvas.width = 48; // must not set width & height in css !!! canvas.height = 500; // must not set width & height in css !!! canvas.setAttribute('style', cssCanvas); ta.canvasLines = canvas; td1.appendChild(canvas); td2.appendChild(ta); div.appendChild(table); // PAINT LINE NUMBERS ta.paintLineNumbers = function() { try { var canvas = this.canvasLines; if (canvas.height != this.clientHeight) canvas.height = this.clientHeight; // on resize var ctx = canvas.getContext("2d"); ctx.fillStyle = "#303030"; ctx.fillRect(0, 0, 42, this.scrollHeight + 1); ctx.fillStyle = "#808080"; ctx.font = "11px monospace"; // NOTICE: must match TextArea font-size(11px) and lineheight(15) !!! var startIndex = Math.floor(this.scrollTop / 15, 0); var endIndex = startIndex + Math.ceil(this.clientHeight / 15, 0); for (var i = startIndex; i < endIndex; i++) { var ph = 10 - this.scrollTop + (i * 15); var text = '' + (1 + i); // line number ctx.fillText(text, 40 - (text.length * 6), ph); } } catch (e) { alert(e); } }; ta.onscroll = function(ev) { this.paintLineNumbers(); }; ta.onmousedown = function(ev) { this.mouseisdown = true; } ta.onmouseup = function(ev) { this.mouseisdown = false; this.paintLineNumbers(); }; ta.onmousemove = function(ev) { if (this.mouseisdown) this.paintLineNumbers(); }; // make sure it's painted ta.paintLineNumbers(); return ta; }; var ta = TextAreaLineNumbersWithCanvas(); ta.value = TextAreaLineNumbersWithCanvas.toString();</code></pre> <pre><code>#mytextarea { width: auto; height: 500px; font-size: 11px; font-family: monospace; line-height: 15px; font-weight: 500; margin: 0; padding: 0; resize: both; color: #ffa; border: 0; background-color: #222; white-space: pre; overflow: auto; } /* supported only in opera */ #mytextarea { scrollbar-arrow-color: #ee8; scrollbar-base-color: #444; scrollbar-track-color: #666; scrollbar-face-color: #444; /* outer light */ scrollbar-3dlight-color: #444; /* inner light */ scrollbar-highlight-color: #666; /* outer dark */ scrollbar-darkshadow-color: #444; /* inner dark */ scrollbar-shadow-color: #222; } /* chrome scrollbars */ textarea::-webkit-scrollbar { width: 16px; background-color: #444; cursor: pointer; } textarea::-webkit-scrollbar-track { background-color: #333; cursor: pointer; } textarea::-webkit-scrollbar-corner { background-color: #484; -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); } textarea::-webkit-scrollbar-thumb { background-color: #444; -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); cursor: pointer; }</code></pre> <pre><code><div id="wrapper"> <textarea id="mytextarea" cols="80" rows="10"></textarea> </div></code></pre> </div> </div> <p></p> <p>存在一个限制，即我们无法在 <pre><code>word-wrap</code></pre> 函数中轻松处理 <pre><code>Paint()</code></pre>，除非迭代整个文本区域内容并绘制到隐藏对象以测量每行高度，这将产生非常复杂的代码。</p> </answer> <answer tick="false" vote="2"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>function generateWithNumber() { let inputTexts = document.getElementById("input").value let textsByLine = inputTexts.split("\n"); const listMarkup = makeUL(textsByLine); document.getElementById("output").appendChild(listMarkup); } function makeUL(array) { let list = document.createElement('ol'); for (let i = 0; i < array.length; i++) { let item = document.createElement('li'); item.appendChild(document.createTextNode(array[i])); list.appendChild(item); } return list; } // document.getElementById('foo').appendChild(makeUL(options[0]));</code></pre> <pre><code>ol { counter-reset: list; } ol > li { list-style: none; } ol > li:before { content: counter(list) ") "; counter-increment: list; }</code></pre> <pre><code><textarea id="input"></textarea> <button onClick=generateWithNumber() >Generate</button> <p id="output"></p></code></pre> </div> </div> <p></p> <h3>说明</h3> <p>此代码定义了一个函数 <pre><code>generateWithNumber()</code></pre>，当单击具有 <pre><code>onClick</code></pre> 事件的按钮时会触发该函数。此函数的目的是从 <pre><code><textarea></code></pre> 元素获取输入文本，将其拆分为行，并将这些行显示为 <pre><code><ol></code></pre>（有序列表）元素中的编号列表。</p> </answer> <answer tick="false" vote="1"> <p>考虑使用 <pre><code>contenteditable</code></pre> 有序列表 <pre><code><ol></code></pre> 而不是 <pre><code><textarea></code></pre> </p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>ol { font-family: monospace; white-space: pre; } li::marker { font-size: 10px; color: grey; }</code></pre> <pre><code><ol contenteditable><li>lorem ipsum <li>&gt;&gt; lorem ipsum <li>lorem ipsum,\ <li>lorem ipsum. <li>&gt;&gt; lorem ipsum <li>lorem ipsum <li>lorem ipsum <li>lorem <li>ipsum <li>&gt;&gt; lorem ipsum <li>lorem ipsum </ol> </code></pre> </div> </div> <p></p> <p>然而，<pre><code>::marker</code></pre>的造型似乎有限（<pre><code>list-style-type</code></pre>）。例如。删除句号或 <pre><code>vertical-align: super</code></pre> 似乎需要其他解决方法（回到 <pre><code>li:before</code></pre> 和 <pre><code>counter</code></pre>）。</p> <p>奖励：<pre><code><li></code></pre>也不需要结束标签<pre><code></li></code></pre>（<a href="https://html.spec.whatwg.org/multipage/syntax.html#optional-tags" rel="nofollow noreferrer">https://html.spec.whatwg.org/multipage/syntax.html#optical-tags</a>），这样可以节省打字时间。</p> <p>据我了解，codemirror 中的 <pre><code><textarea></code></pre> 只是在后台工作（<a href="https://stackoverflow.com/questions/70028081/pseudo-contenteditable-how-does-codemirror-works">伪内容可编辑：codemirror 是如何工作的？</a>）。</p> </answer> <answer tick="false" vote="1"> <h1>行号</h1> <h2>代码：</h2> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const textarea = document.querySelector("textarea"); const numbers = document.querySelector(".numbers"); textarea.addEventListener("keyup", (e) => { const num = e.target.value.split("\n").length; numbers.innerHTML = Array(num).fill("<span></span>").join(""); }); textarea.addEventListener("keydown", (event) => { if (event.key === "Tab") { const start = textarea.selectionStart; const end = textarea.selectionEnd; textarea.value = textarea.value.substring(0, start) + "\t" + textarea.value.substring(end); event.preventDefault(); } });</code></pre> <pre><code> body { font-family: Consolas, "Courier New", Courier, monospace; } .editor { display: inline-flex; gap: 10px; font-family: Consolas, "Courier New", Courier, monospace; line-height: 21px; background-color: #282a3a; border-radius: 2px; padding: 20px 10px; } textarea { line-height: 21px; overflow-y: hidden; padding: 0; border: 0; background: #282a3a; color: #fff; min-width: 500px; outline: none; resize: none; font-family: Consolas, "Courier New", Courier, monospace; } .numbers { width: 20px; text-align: right; } .numbers span { counter-increment: linenumber; } .numbers span::before { content: counter(linenumber); display: block; color: #506882; }</code></pre> <pre><code><div class="editor"> <div class="numbers"> <span></span> </div> <textarea cols="30" rows="10"></textarea> </div></code></pre> </div> </div> 来自：<a href="https://www.webtips.dev/add-line-numbers-to-html-textarea" rel="nofollow noreferrer">https://www.webtips.dev/add-line-numbers-to-html-textarea</a><p></p> <p>实际上效果很好。</p> <p>行号不会立即出现，但运行速度相当快。<strong> </strong> </p> </answer>我创建了一个行编号系统，可以在换行的文本区域上正常工作。我还没有为单行溢出代码定制它，但如果你想要换行，它很好。<answer tick="false" vote="1"> <p></p>CodePen 演示<p><a href="https://codepen.io/CodemasterUnited/pen/oNQexQp" rel="nofollow noreferrer"> </a></p><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><code>'use scrict'; var linenumbers = document.getElementById('line-numbers'); var editor = document.getElementById('codeblock'); function getWidth(elem) { return elem.scrollWidth - (parseFloat(window.getComputedStyle(elem, null).getPropertyValue('padding-left')) + parseFloat(window.getComputedStyle(elem, null).getPropertyValue('padding-right'))) } function getFontSize(elem) { return parseFloat(window.getComputedStyle(elem, null).getPropertyValue('font-size')); } function cutLines(lines) { return lines.split(/\r?\n/); } function getLineHeight(elem) { var computedStyle = window.getComputedStyle(elem); var lineHeight = computedStyle.getPropertyValue('line-height'); var lineheight; if (lineHeight === 'normal') { var fontSize = computedStyle.getPropertyValue('font-size'); lineheight = parseFloat(fontSize) * 1.2; } else { lineheight = parseFloat(lineHeight); } return lineheight; } function getTotalLineSize(size, line, options) { if (typeof options === 'object') options = {}; var p = document.createElement('span'); p.style.setProperty('white-space', 'pre'); p.style.display = 'inline-block'; if (typeof options.fontSize !== 'undefined') p.style.fontSize = options.fontSize; p.innerHTML = line; document.body.appendChild(p); var result = (p.scrollWidth / size); p.remove(); return Math.ceil(result); } function getLineNumber() { var textLines = editor.value.substr(0, editor.selectionStart).split("\n"); var currentLineNumber = textLines.length; var currentColumnIndex = textLines[textLines.length-1].length; return currentLineNumber; } function init() { var totallines = cutLines(editor.value), linesize; linenumbers.innerHTML = ''; for (var i = 1; i <= totallines.length; i++) { var num = document.createElement('p'); num.innerHTML = i; linenumbers.appendChild(num); linesize = getTotalLineSize(getWidth(editor), totallines[(i - 1)], {'fontSize' : getFontSize(editor)}); if (linesize > 1) { num.style.height = (linesize * getLineHeight(editor)) + 'px'; } } linesize = getTotalLineSize(getWidth(editor), totallines[(getLineNumber() - 1)], {'fontSize' : getFontSize(editor)}); if (linesize > 1) { linenumbers.childNodes[(getLineNumber() - 1)].style.height = (linesize * getLineHeight(editor)) + 'px'; } editor.style.height = editor.scrollHeight; linenumbers.style.height = editor.scrollHeight; } editor.addEventListener('keyup', init); editor.addEventListener('input', init); editor.addEventListener('click', init); editor.addEventListener('paste', init); editor.addEventListener('load', init); editor.addEventListener('mouseover', init);</code><div> <pre><code>#source-code { width: 100%; height: 450px; background-color: #2F2F2F; display: flex; justify-content: space-between; overflow-y: scroll; border-radius: 10px; } #source-code * { box-sizing: border-box; } #codeblock { white-space: pre-wrap; width: calc(100% - 30px); float: right; height: auto; font-family: arial; color: #fff; background: transparent; padding: 15px; line-height: 30px; overflow: hidden; min-height: 100%; border: none; } #line-numbers { min-width: 30px; height: 100%; padding: 15px 5px; font-size: 14px; vertical-align: middle; text-align: right; margin: 0; color: #fff; background: black; } #line-numbers p { display: block; height: 30px; line-height: 30px; margin: 0; } #codeblock:focus{ outline: none; }</code></pre> <pre><code><div id="source-code"> <div id="line-numbers"><p>1</p></div> <textarea id="codeblock"></textarea> </div></code></pre> <pre> </pre> </div></div> <p> </p></answer>

React <textarea> 当通过 value prop 传入值时，组件无法在 Chrome 中进行验证

我在使用Material-UI的TextField组件时偶然发现了这个问题。当在 TextField 上传递多行属性时，该组件设置为 ，当传递多行和 </desc> 时 <question vote="1"> <p>我在使用 Material-UI 的 TextField 组件时偶然发现了这个问题。在 TextField 上传递 multiline 属性时，组件设置为 <pre><code><textarea></code></pre>，同时传递 multiline 和 minlength 属性时，minlength 无法验证。我已将这个问题缩小到 <pre><code><textarea></code></pre> 元素，通过“value”属性传递值时也会出现同样的问题，但这仅发生在 Chrome 和 Edge 中，而不是 FireFox 中。 minlength 属性还会验证何时将值作为 <pre><code><textarea></code></pre> 的子级传入。</p> <p>这里是一个验证失败的例子：</p> <pre><code><form onSubmit={handleSubmit}> <textarea minLength={5} value={textareaValue} onChange={handleTextareaChange} /> <button type="submit">submit</button> </form> </code></pre> <p>这是测试的验证对象读数，其中我提交的字符少于 5 个，这应该会失败验证：</p> <pre><code>{ badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valid: true, valueMissing: false } </code></pre> <p>在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow noreferrer">这个 MDN 文档</a>中，它说“<pre><code><textarea></code></pre>不支持 value 属性”。但在<a href="https://react.dev/reference/react-dom/components/textarea" rel="nofollow noreferrer">这个 React 文档</a> 中，它说“您可以通过传递 value 属性来控制文本区域”。</p> <p>还有其他人遇到过这个问题吗？谢谢！</p> </question> <answer tick="false" vote="0"> <blockquote> <p>当值作为 <pre><code><textarea></code></pre> 的子级传入时，它也适用于任何浏览器。</p> </blockquote> <p><pre><code>minLength</code></pre>属性似乎工作正常，但<strong>仅当</strong>你的<pre><code>textarea</code></pre>是<em>不受控制</em>（没有<pre><code>value</code></pre>或<pre><code>onChange</code></pre>道具）。这是一个缺点，但也许在您的特定情况下，这可能就是您正在寻找的。</p> <p><a href="https://codesandbox.io/s/sharp-ardinghelli-rc5f63?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sharp-ardinghelli-rc5f63?file=/src/App.js</a></p> <pre><code>export default function App() { return ( <div> <form onSubmit={handleSubmit}> <textarea minLength="5" /> <button type="submit">submit</button> </form> </div> ); } </code></pre> </answer> </body></html>

风格化文本区域的调整大小抓取器（右下角的那个东西）[重复]

是否可以以图形方式风格化文本区域的大小调整？我想给它不同的颜色和尺寸。

插入文本时如何在文本区域中创建新行？ [已关闭]

通过 PHP 插入文本时如何在文本区域中创建新行？ 我以为是 但这会直接打印在文本区域中。

以 Angular 形式创建文本区域 - 获取表单无法绑定错误

出现错误 无法绑定到“formGroup”，因为它不是“form”的已知属性。 我正在使用一个文本区域（控件名称“psapsearch”）创建表单组 psapmultiCircuitsearch 得到...

JavaFX| .setWrapText() 不会在 TextArea 中换行文本

我有一个 TextArea 控件，无论我是在其中键入还是加载文件内容，我都试图使文本换行、换行。我的 .setWrapText() 调用不起作用，我不确定...

从保存的文本区域反应显示换行符

使用 Facebook React。 在设置页面中，我有一个多行文本区域，用户可以在其中输入多行文本（在我的例子中是地址）。 当我尝试显示 </desc> <question vote="139"> <p>使用 Facebook <pre><code>React</code></pre>。 在设置页面中，我有一个多行 <pre><code>textarea</code></pre>，用户可以在其中输入多行文本（在我的例子中是地址）。 </p> <pre><code><textarea value={address} /> </code></pre> <p>当我尝试显示地址时，例如<pre><code>{address}</code></pre>之类的内容，它不会显示换行符并且全部在一行上。 </p> <pre><code><p>{address}</p> </code></pre> <p>有什么想法可以解决这个问题吗？ </p> </question> <answer tick="true" vote="379"> <p>没有理由使用JS。您可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" rel="noreferrer">white-space</a> CSS 属性轻松告诉浏览器如何处理换行符：</p> <pre><code>white-space: pre-line; </code></pre> <blockquote> <p>预上线</p> <p>空白序列被折叠。断线于 换行符，位于 <pre><code><br></code></pre>，并根据需要填充行框。</p> </blockquote> <p>看看这个演示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> #p_wrap { white-space: pre-line; } </style> <textarea id="textarea"></textarea> <p id="p_standard"></p> <hr> <p id="p_wrap"></p> <script> textarea.addEventListener('keypress', function(e) { p_standard.textContent = e.target.value p_wrap.textContent = e.target.value }) </script></code></pre> </div> </div> <p></p> <p><a href="https://i.stack.imgur.com/mNI8T.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL21OSThULnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="43"> <p>这是可以预料的，您需要转换新行（ ) 字符到 HTML 换行符 <br/></p> <p>一篇关于在 React 中使用它的文章：<a href="https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw" rel="noreferrer">React Newline to Break (nl2br)</a> </p> <p>引用文章：</p> <blockquote> <p>因为你知道 React 中的一切都是函数，所以你不能真正做到这一点</p> <pre><code>this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />') </code></pre> <p>因为这会返回一个内部包含 DOM 节点的字符串，所以这也是不允许的，因为必须只是一个字符串。</p> <p>然后你可以尝试做这样的事情：</p> <pre><code>{this.props.section.text.split(“\n”).map(function(item) { return ( {item} <br/> ) })} </code></pre> <p>这也是不允许的，因为 React 是纯函数，两个函数可以彼此相邻。</p> <p>tldr。解决方案</p> <pre><code>{this.props.section.text.split(“\n”).map(function(item) { return ( <span> {item} <br/> </span> ) })} </code></pre> <p>现在我们将每个换行符包装在一个跨度中，并且效果很好，因为跨度具有内联显示。现在我们有了一个有效的 nl2br 换行解决方案</p> </blockquote> </answer> <answer tick="false" vote="20"> <p>解决方案是在显示 <pre><code>white-space</code></pre> 内容的元素上设置属性 <pre><code>textarea</code></pre>:</p> <pre><code>white-space: pre-line; </code></pre> </answer> <answer tick="false" vote="4"> <p>Pete 之前提出的带有独立组件的提案是很好的解决方案，尽管它忽略了一件重要的事情。列表需要<a href="https://reactjs.org/docs/lists-and-keys.html#keys" rel="nofollow noreferrer">键</a>。我稍微调整了一下，我的版本（没有控制台警告）看起来像这样：</p> <pre><code>const NewLineToBr = ({ children = '' }) => children.split('\n') .reduce((arr, line, index) => arr.concat( <Fragment key={index}> {line} <br /> </Fragment>, ), []) </code></pre> <p>它使用 React 16 的 <a href="https://reactjs.org/docs/react-api.html#reactfragment" rel="nofollow noreferrer">Fragments</a></p> </answer> <answer tick="false" vote="3"> <p>对上述答案的一点补充： <pre><code>white-space</code></pre>属性最好与<pre><code>word-wrap</code></pre>一起使用，以防止溢出。</p> <pre><code>p { white-space: pre-wrap; word-wrap: break-word; } </code></pre> </answer> <answer tick="false" vote="2"> <p>从 React 16 开始，组件可以返回元素数组，这意味着您可以像这样创建组件：</p> <pre><code>export default function NewLineToBr({children = ""}){ return children.split('\n').reduce(function (arr,line) { return arr.concat( line, <br /> ); },[]); } </code></pre> <p>你会这样使用：</p> <pre><code><p> <NewLineToBr>{address}</NewLineToBr> </p> </code></pre> </answer> <answer tick="false" vote="0"> <p>喜欢网络版。我不知道Fragment组件，它是如此有用。不过不需要使用reduce方法。 地图就够了。另外，列表确实需要react中的键，但是使用迭代方法中的索引是个坏习惯。 eslint 不断地在我的警告中粉碎这个问题，直到我遇到了混淆错误。 所以它看起来像这样：</p> <pre><code>const NewLine = ({ children }) => children.split("\n").map(line => ( <Fragment key={uuidv4()}> {line} <br /> </Fragment> )); </code></pre> </answer> <answer tick="false" vote="0"> <p>使用浏览器打开此 html 页面。</p> <p>我的是铬115.0.5790.98</p> <p>#ExampalReactNewLines.html</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>ExampalReactNewLines</title> <script src='https://unpkg.com/[email protected]/babel.js'></script> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> </head> <body> <div id='root'></div> <script type='text/babel'> function ExampalReactNewLines() { return ( <div> {` 1 newline 2 newline 3 newline 7 newline 2 newline 15 newline stop `.split(/\n{100}/).map((i,key) => {return <pre key={key}>{i}</pre>;}) } </div> ) } /////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////// ReactDOM.render(<ExampalReactNewLines />, document.querySelector('#root')); </script> </body> </html> </code></pre> </answer> </body></html>