堆栈内存溢出
  简体   繁体   English

如何在 textarea 内容中添加标签、新行？

[英]how can i add tabs, new line inside textarea content?

 原文  2021-12-10 17:03:38  2   1    javascript/ html/ css/ bootstrapping

问题描述

I am trying to develop a blogging website where I am writing a code for creating a blog page, here I am taking the blog content using a textarea and after writing the blog content user has to publish using the publish button.我正在尝试开发一个博客网站，我正在编写用于创建博客页面的代码，这里我使用文本区域获取博客内容，并且在编写博客内容后，用户必须使用发布按钮发布。

so I have to write a code for this textarea where I need to give tabs in paragraphs and next lines and scrollbar is there any way to achieve this?所以我必须为这个文本区域编写一个代码，我需要在段落和下一行和滚动条中给出标签，有没有办法实现这一点？ so that when I will be published this, there will be a proper paragraph in a blog?这样当我发表这篇文章时，博客中就会有一个合适的段落？

<section class="body-section">
    <div class="blog-wrapper">
        <span class="title">
            <input type="text" class="form-control form-control-lg" name="title" placeholder="Title for your blog" id="txtTitle">
        </span>
        <span class="txtareaBody">
            <textarea name="txt" class="form-control" placeholder="start writing your blog.." id="comment" rows="20" scrollable></textarea>
        </span>
        <span>
            <input type="file" placeholder="upload thumbnail image" formnovalidate name="imgUpload" id="ImgUpload" class="form-control">
        </span>
    </div>

</section>

1 个解决方案

解决方案1
 0  2021-12-11 12:35:27

To provide tab in paragraphs use the tab property and define the tab size.This would provide the required spacing in the text area.Here I have provided the code for your reference.要在段落中提供制表符，请使用制表符属性并定义制表符大小。这将在文本区域中提供所需的间距。这里我提供了代码供您参考。 You can also refer the link provided to know more on inserting tabs and spaces in HTML: https://www.geeksforgeeks.org/how-to-insert-spaces-tabs-in-text-using-html-css/您还可以参考提供的链接以了解有关在 HTML 中插入制表符和空格的更多信息： https://www.geeksforgeeks.org/how-to-insert-spaces-tabs-in-text-using-html-css/ 

 <style>.tab { tab-size: 2; } </style> <section class="body-section"> <div class="blog-wrapper"> <span class="title"> <input type="text" class="form-control form-control-lg" name="title" placeholder="Title for your blog" id="txtTitle"> </span> <span class="tab"> <textarea name="txt" class="form-control" placeholder="start writing your blog.." id="comment" rows="20" scrollable></textarea> </span> <span> <input type="file" placeholder="upload thumbnail image" formnovalidate name="imgUpload" id="ImgUpload" class="form-control"> </span> </div> </section>

如何在 HTML 中将换行符显式显示为“\n”<textarea> &lt;i&gt;tag?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;标签？&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我正在编写一个简单的 web 应用程序，它将纯文本转换为 python 代码。</p><p> 示例：这是我的纯文本 ----&gt; print("这是我的纯文本")</p><p> 纯文本存储在常规文本区域中。 output 文本存储在禁用的文本区域中。</p><p> 问题：HTML 自动解析 \n，我还没有找到将 \n 保存在 output 文本区域内的好方法。 这是一个问题，因为复制 output 文本区域内的内容无法正常工作。</p><p> 这是我正在尝试做的事情：</p><p> 输入：Foo Bar</p><p> Output：打印（“Foo\nBar”）</p><hr><p> 源代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function set(el, text) { while (el.firstChild) el.removeChild(el.firstChild); el.appendChild(document.createTextNode(text)) } /* setupUpdater will be called once, on page load. */ function setupUpdater() { var input = document.getElementsByTagName('textarea')[0], output = document.getElementsByTagName('textarea')[1], timeout = null; function handleChange() { //string.replace(/[\n]/g, '\n') var inputText = input.value; set(output, "print(\"" + inputText + "\")"); ("\n"); } /* eventHandler is called on keyboard and mouse events. If there is a pending timeout, it cancels it. It sets a timeout to call handleChange in 0ms. */ function eventHandler() { if (timeout) clearTimeout(timeout); timeout = setTimeout(handleChange, 0); } input.onkeydown = input.onkeyup = input.onclick = eventHandler; } setupUpdater(); document.getElementsByTagName('textarea')[0].focus();</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="grid-container"&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"&gt;&lt;/textarea&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" readonly&gt;print("")&lt;/textarea&gt; &lt;/div&gt;</pre></div></div><p></p><p> 我很乐意澄清我没有解释的任何事情，但我确实希望这个问题和我想要达到的目标是明确的。</p></div> - How can I explicitly show line breaks as “\n” inside a HTML <textarea> tag?

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery替换textarea内部属性的内容？ - How can I use jQuery to replace the content of an attribute inside of a textarea? 如何在复制到剪贴板时在 textarea 上添加新行？ - how to add new line on to textarea on copy to clipboard? 如何在textarea的行之外添加图像？ - How can I add an image besides a textarea's line? 如何添加在TextArea中键入的按钮？ - How can I add a button that types inside a TextArea? 在js中，如何替换将\\ n（而不是新行标记）作为字符串添加到textarea中每行的结尾 - in js, how do i replace add \n (not a new line marker) as a string to end of each line in a textarea 如何将该内容输出到文本区域？ - How can i output this content to a textarea? 如何使用Symfony3和Ajax将tinyMCE textarea编辑器内容发送到内部控制器 - How can I send tinyMCE textarea editor content to inside controller using Symfony3 and Ajax 如何将按钮放在文本区域内并限制文本区域大小？ - How can i put the buttons inside the textarea and limit the textarea size? 如何在textarea中动态添加新行； javascript 或 jquery - How to dynamically add a new line in a textarea; javascript or jquery 如何在 HTML 中将换行符显式显示为“\n”<textarea> &lt;i&gt;tag?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;标签？&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我正在编写一个简单的 web 应用程序，它将纯文本转换为 python 代码。</p><p> 示例：这是我的纯文本 ----&gt; print("这是我的纯文本")</p><p> 纯文本存储在常规文本区域中。 output 文本存储在禁用的文本区域中。</p><p> 问题：HTML 自动解析 \n，我还没有找到将 \n 保存在 output 文本区域内的好方法。 这是一个问题，因为复制 output 文本区域内的内容无法正常工作。</p><p> 这是我正在尝试做的事情：</p><p> 输入：Foo Bar</p><p> Output：打印（“Foo\nBar”）</p><hr><p> 源代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function set(el, text) { while (el.firstChild) el.removeChild(el.firstChild); el.appendChild(document.createTextNode(text)) } /* setupUpdater will be called once, on page load. */ function setupUpdater() { var input = document.getElementsByTagName('textarea')[0], output = document.getElementsByTagName('textarea')[1], timeout = null; function handleChange() { //string.replace(/[\n]/g, '\n') var inputText = input.value; set(output, "print(\"" + inputText + "\")"); ("\n"); } /* eventHandler is called on keyboard and mouse events. If there is a pending timeout, it cancels it. It sets a timeout to call handleChange in 0ms. */ function eventHandler() { if (timeout) clearTimeout(timeout); timeout = setTimeout(handleChange, 0); } input.onkeydown = input.onkeyup = input.onclick = eventHandler; } setupUpdater(); document.getElementsByTagName('textarea')[0].focus();</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="grid-container"&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"&gt;&lt;/textarea&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" readonly&gt;print("")&lt;/textarea&gt; &lt;/div&gt;</pre></div></div><p></p><p> 我很乐意澄清我没有解释的任何事情，但我确实希望这个问题和我想要达到的目标是明确的。</p></div> - How can I explicitly show line breaks as “\n” inside a HTML <textarea> tag?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM