textarea 相关问题

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

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

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

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

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

我的网页上有 html 编辑器，但我希望它不可编辑。怎么做？ <p>我的网页上有 html 编辑器，但我希望它不可编辑。怎么办？</p> <pre><code>&lt;text area name=&#34;content&#34; id=&#34;editor&#34;&gt;&lt;/text area&gt; &lt;script src=&#34;https://htmeditor.com/js/htmeditor.min.js&#34; htmeditor_textarea=&#34;editor&#34;&gt; </code></pre> <p>这是我尝试过的代码，我确实得到了完美的html编辑器，但我希望它只能在按钮上编辑，然后才能禁用或只读（不可编辑）。</p> </question> <answer tick="false" vote="0"> <p>如果您可以将 css 类更改为 html 元素，则此解决方案可能是您的选择：</p> <p>您可以将包装 div 添加到文本区域和脚本中：</p> <pre><code> &lt;div id=&#34;parent-container&#34; class=&#34;handle-no-events&#34;&gt; &lt;textarea name=&#34;content&#34; id=&#34;editor&#34;&gt;&lt;/textarea&gt; &lt;script src=&#34;https://htmeditor.com/js/htmeditor.min.js&#34; htmeditor_textarea=&#34;editor&#34;&gt;&lt;/script&gt; &lt;/div&gt; </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>

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

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

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

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

使用 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>

在 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>