开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在HTML中读取Textarea中的值，并在弹出窗口中显示格式化文本

，可以通过以下步骤实现：

在HTML中创建一个Textarea元素，用于输入文本内容：

<textarea id="myTextarea"></textarea>

使用JavaScript获取Textarea中的值，并进行格式化处理：

var textareaValue = document.getElementById("myTextarea").value;
var formattedText = textareaValue.replace(/\n/g, "<br>").replace(/\s/g, "&nbsp;");

上述代码将Textarea中的换行符替换为<br>标签，将空格替换为 实现文本的格式化。

创建一个弹出窗口，并在窗口中显示格式化后的文本：

var popupWindow = window.open("", "Popup", "width=400,height=300");
popupWindow.document.write(formattedText);

上述代码创建一个新的窗口，并使用document.write()方法将格式化后的文本写入窗口中。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Textarea值读取和格式化</title>
    <script>
        function showFormattedText() {
            var textareaValue = document.getElementById("myTextarea").value;
            var formattedText = textareaValue.replace(/\n/g, "<br>").replace(/\s/g, "&nbsp;");

            var popupWindow = window.open("", "Popup", "width=400,height=300");
            popupWindow.document.write(formattedText);
        }
    </script>
</head>
<body>
    <textarea id="myTextarea"></textarea>
    <br>
    <button onclick="showFormattedText()">显示格式化文本</button>
</body>
</html>

这样，当用户在Textarea中输入文本后，点击"显示格式化文本"按钮，就会弹出一个窗口显示格式化后的文本内容。

推荐的腾讯云相关产品：无

相关搜索:为什么在此代码中，html页面中的图像和文本也显示在弹出窗口中？[ PHTML]从数据库中读取varbinary列并将其显示在弹出窗口中从文本文件中读取值并在html页面中显示的Javascript 在App中显示HTML代码，而不是在xcode中显示html的格式化类型在grails 3.3.9中如何在点击按钮时弹出日历并在文本字段中存储值在html中显示文本文件中的文本在html中突出显示选定的文本在html文本框/ textarea中显示特定行在Ionic中显示预先格式化的HTML内容在react js中突出显示文本的textarea组件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

java Swing用户界面组件文本输入：文本域+密码域+格式化的输入域

在Swing中，文本区没有滚动条。如果需要滚动条，可以把文本区中插入一个滚动窗格（scroll pane）中。...textArea =new JTextArea(8, 40); JScrollPane scrollPane = new JScrollPane(textArea); 现在滚动窗格管理文本区的视图。...如果文本超出了文本区可以显示的范围，滚动条就会自动出现，并且在删除部分文本后，当文本能够显示在文本区范围内时，滚动条会再次消失。滚动是由滚动窗格内部处理的，编写程序时无需处理滚动事件。...提示：在Swing中，为组件增加滚动条的通用机制是将组件放置在滚动窗格中。例9-4给出了文本区演示的完整代码。这个程序只能在文本区中修改文本。点击“Insert”将句子插入文本末尾。...注意：JTextArea组件只显示无格式的文本，没有字体或者格式设置。如果想要显示格式化文本（如HTML或者RTF），就需要使用JEditorPane和JTextPane类。

4K1 0

HTML概要

HTML标签不区分大小写，和是一样的，但建议小写，因为大部分程序员都以小写为准。 HTML标签标签如果想在网页上显示文章，就需要标签，把文章的段落放到标签中。...语法：段落文本段落文本 ? ? 标签使用q标签可以在html中添加一段引用，如作家的话、诗句等。 1. ...和标签在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用标签了，如下面例子： var i=i+300... 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。...2、cols ：多行输入域的列数。 3、rows ：多行输入域的行数。 4、在标签之间可以输入默认值。 ?

3.7K9 1

HTML基础知识

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。 HTML的全局标准属性在HTML中，规定了8个全局标准属性。 class用于定义元素的类名。 id用于指定元素的唯一id。...onchange，在元素的元素值被改变时触发。 onfocus，在元素获得焦点时触发。 onreset，当表单中的重载按钮被点击时触发。 onselect，在元素中文本被选中后触发。...查看div+css样式HTML:点击下方链接跳转，可查看源码： div-css.html 格式化元素普通文本，定义粗体文本，定义大号字，定义着重文字，定义斜体字...值说明 _self 在超链接所在框架或窗口中打开目标页面 _blank 在新浏览器窗口中打开目标页面 _parent 将目标页面载入含有该链接框架的父框架集或父窗口中 _top 在当前的整个浏览器窗口中打开目标页面...空元素 frame属性属性说明 src 需要显示的html文档 frameborder 定义框架的外边框，属性值为0或者1 scrolling 定义是否显示滚动条,有3个值：

2.6K2 2

第三章构建Markdown应用程序 | Electron in Action(中译)

[figure31.png] 图3.1 我们的应用程序的线框显示，用户可以在左侧窗格中输入文本，或者从用户的文件系统的文件中加载文本。在这一章中，我们为我们的应用奠定了基础。...我们创建项目的结构，安装依赖项，设置主进程和呈现器进程，构建用户界面，并在用户向左侧窗格输入文本时实现markdown到HTML的转换。我们将在接下来的几章中分阶段构建应用程序的其余部分。...优雅地显示浏览器窗口如果你仔细观察你的应用程序的启动，您将注意到，在Electron加载index.html并在窗口中呈现DOM之前，窗口完全为空。...[figure37.jpg] 图3.7 我们将在左侧窗格中添加一个事件监听器，它将以HTML的形式呈现标记并显示在右侧窗格中。...最后，我们向markdownView添加了一个事件监听器，它将在keyup上读取它的内容(在textarea元素中，内容存储在它的value属性中)，通过marked运行它们，然后将它们加载到htmlView

2K3 0

10分钟实现Typora(markdown)编辑器

图3.1 我们的应用程序的线框显示，用户可以在左侧窗格中输入文本，或者从用户的文件系统的文件中加载文本。在这一章中，我们为我们的应用奠定了基础。...优雅地显示浏览器窗口如果你仔细观察你的应用程序的启动，您将注意到，在Electron加载index.html并在窗口中呈现DOM之前，窗口完全为空。...图3.7 我们将在左侧窗格中添加一个事件监听器，它将以HTML的形式呈现标记并显示在右侧窗格中。引入依赖项很容易，因为我们可以使用Node的require来引入marked。...最后，我们向markdownView添加了一个事件监听器，它将在keyup上读取它的内容(在textarea元素中，内容存储在它的value属性中)，通过marked运行它们，然后将它们加载到htmlView...图3.8 我们的应用程序接受用户在左窗格中键入的内容，并在右窗格中将其自动呈现为HTML。该内容由用户提供，不属于我们的应用程序。

2.6K5 0

HTML基础知识巩固你的基础

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。 HTML的全局标准属性在HTML中，规定了8个全局标准属性。 class用于定义元素的类名。...支持tabindex属性的元素有,,,,,, dir用于指定元素中内容的文本方向。...onchange，在元素的元素值被改变时触发。 onfocus，在元素获得焦点时触发。 onreset，当表单中的重载按钮被点击时触发。...查看div+css样式HTML:点击下方链接跳转，可查看源码： div-css.html 格式化元素普通文本，定义粗体文本，定义大号字...值说明 _self 在超链接所在框架或窗口中打开目标页面 _blank 在新浏览器窗口中打开目标页面 _parent 将目标页面载入含有该链接框架的父框架集或父窗口中 _top 在当前的整个浏览器窗口中打开目标页面

2.1K1 0

Web前端开发HTML笔记

标签对之间的内容,将显示在Web浏览器窗口的用户区域,它是HTML文档中最主要的部分在body标签中可以规定整个文档的一些基本属性,例如以下几个属性....vlink 指定HTML文档中,已链接超链接对象的颜色 background 指定HTML文档中,文档的背景文件特殊字符在HTML中有很多特殊的符号是需要特别处理的,例如这两个符号是用来表示标签的开始和结束的... 居中对齐标记,让段落或者是文字相对于父标记居中显示预格式化标记,保留预先编排好的格式文本标签常用的文本标签也就以下这些,但是我们基本不会使用...,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等 target: (1) _blank在一个新的窗口中打开链接 (2) _seif(默认值)在当前窗口中打开链接 (3) _parent...在父窗口中打开页面（框架中使用较多） (4) _top在顶层窗口中打开文件（框架中使用较多）超链接瞄点: 使用超链接瞄点,如下例子寻找页面中id=i1的标签,将其标签显示在页面顶部.

2.2K2 0

Javascript中最常用的55个经典技巧(转)

可以在收藏夹中显示出你的图标 7....21.让弹出窗口总是在最上面: 22.不要滚动条? ...如何设定打开页面的大小打开页面的位置 27.在页面中如何加入不是满铺的背景图片... 窗口中间弹出 window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight... 49、在网页中用按钮来控制前页，后页和主页的显示。

4472 0

Power Query 真经 - 第 3 章 - 数据类型与错误

图 3-1 Excel 中的示例数据在这里看到的是在 Excel 中已被格式化的数据。虽然表格中显示的每个数值都被四舍五入到第一列中显示的小数位数，但会注意到它们都被格式化为显示 6 位小数。...【注意】有趣的是，在 Power Query 的早期实现中，【货币】（固定小数）数据类型并不包含特殊的格式化显示。换句话说，1603 的值会在没有小数的情况下直接显示出来，不带有小数点。...会注意到，错误信息显示在预览下方的 “结果窗格” 中，并指出它是一个 “DataFormat.Error”。...图 3-20 在 Power Query 中这个公式不兼容结果窗格显示了 “Expression.Error”（由试图进行的数学运算触发错误），提示的意思是，不能用数字乘以文本。...展开【查询】导航器窗格。选择 “ErrorData” 查询。然后，此时可以看到最初查询，并在【应用的步骤】窗口中查看其步骤。这就是棘手的部分了。在哪里可以修复它？先思考一下这个问题。

5.2K2 0

001.html常用的基础知识点

，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。...基本解释锚, 铁锚的在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：文本或图像...意思是超文本引用 target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。...-- 注释语句 --> ctrl + / 或者 ctrl +shift + / 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到...通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：文本内容 ----

3K2 0

html基础知识点合集

HTML中的文本格式化标签，使文字以特殊的方式显示。...基本解释锚, 铁锚的在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：文本或图像...意思是超文本引用 target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。...-- 注释语句 --> ctrl + / 或者 ctrl +shift + / 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到...通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：文本内容下拉菜单

2.4K2 0

【Java Web_01】HTML

* 段落标签【文本内容】默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。...⚪ target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。...* th 用户定义表中的字段 * tr 用于定义表格中的一行，必须嵌套在 table 标签中，在 table 中包含几对 tr 就有几行表格。...控件(文本域) ⚪ 需要输入大量的信息，就需要用到 textarea 标签。...通过 textarea 控件可以轻松地创建多行文本输入框 ⚪ 例如：

2.3K3 1

JavaScript脚本语言入门（下）

中在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或函数名即可。...() 显示一个确认对话框，单击“确认”按钮时返回true，否则返回false prompt() 弹出一个提示对话框，并要求输入一个简单的字符串 blur() 将键盘焦点从顶层浏览器窗口中移开。...，下面将对其进行详细介绍：（1）open()方法 open方法用于打开一个新的浏览器窗口，并在该窗口中装载指定URL地址的网页。...yes或no| 例如：打开一个新的浏览器窗口，在该窗口中显示bbs.htm文件，设置打开窗口的名称为bbs,并设置窗口的顶边距、左边距、宽度和高度，代码如下： window.open("bbs.htm...在页面中添加用于输入原字符串和显示转换后的字符串的表单及表单元素，代码如下： function trim(){ var

1.5K1 0

FPGA Vivado设计流程

10) 在Sources窗格中展开Design Sources，双击lab1.v在文本编辑器中打开源文件，查看源文件内容。 ?...1.6 双击‘lab1_tb.v’在文本编辑窗口中查看文件内容。 ?...’的值设为200ns，点击‘Apply’。...2.2 在弹出窗口中选择‘Add or create constraints’，点击Next继续。...5) 连接完成后，我们可以在Hardware窗格中找到连接的设备。 ? 6) 点击上方的‘Program device’，在弹出的窗口中选择相应的比特流文件，点击‘Program’开始下载。 ?

3.4K1 0

微信很好用却很少人知道的浮窗功能

当你正在用微信读一篇公众号文章或正在读文件时，有新消息进来，你是关闭当前的文章或文件，查看消息，还是继续读完再处理？还有，你是否希望在微信中打开多个文件或多篇文章并在它们之间切换。...有了“浮窗”功能，这些问题都不再是问题了。文章的浮窗如果你正在读微信公众号文章、外部分享文章，那么点击右上角的三个点，也就是我们之前操作分享的入口，在弹出的窗口的第二排第一个就是“浮窗”。...点击浮窗，此时你看的文章便变成一个浮动的小按钮，在你使用微信的整个过程中它都会浮动在页面上。当你处理完其他操作之后，点击此按钮中对应的文章，便可回到上次阅读的地方。...点击正在阅读文件的右上角三个点，点击弹出窗口中的第二个按钮“浮窗”，即可完成设置。不仅仅是文本类文件可以如此操作，音频文件也可以。...小程序的浮窗不仅仅针对文章和文件可以使用浮窗功能，小程序同样可以使用浮窗功能。在使用小程序的界面，点击右上角的三个点（一大两小），在弹出的窗口中点击浮窗，即可把小程序也设置为浮窗。

3.3K3 0

MySQL数据库管理工具_mysql数据库管理工具有哪些

1.登录MySQL 双击SQLyog的图标后，打开SQLyog的登录界面，单击“新建”按钮，新建连接为“MySQL”（名称可自取），正确输入服务器地址，用户名，密码端口号，在“数据库”文本框中填写数据库名称...使用SQlyog工具创建数据库在SQlyog中可以通过以下步骤完成数据库的创建。 1.通过操作向导创建数据库右击对象资源管理器窗口的空白处，在弹出的快捷菜单中选择“创建数据库”命令。...在弹出的“创建数据库”对话框中，填写数据库名称，如图。完成后单击“创建”按钮即可。...在“Query”窗口中输入创建数据库的语句，单击执行查询按钮，创建数据库。创建成功后，会在“信息”窗格显示信息。单击刷新按钮，在对象资源管理器中也会显示新创建的数据库，如图。...在“历史”窗格中，可以查看操作的历史记录。通过上述操作后，在“历史”窗格中可以看到建库和刷新两个操作对应的SQL语句。如图。

5.6K3 0

HTML基础

标签主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。...总结： 1、表头，也就是th标签中的文本默认为粗体并且居中显示 2、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 3、用css样式，为表格加入边框Table 表格在没有添加 css...摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。...… … 标签 _blank --在新窗口中打开链接 _parent --在父窗体中打开链接 _self --在当前窗体打开链接,此为默认值 _top...value：为文本输入框设置默认值。(一般起到提示作用) 标签当用户需要在表单中输入大段文字时，需要用到文本输入域。

3.8K4 1

VueUse中的这5个函数，也太好用了吧

来看一个示例，在该示例中，我们做一个能够撤销的文本区域第一步是在没有 VueUse 的情况下创建我们的基本组件--使用ref、textarea、以及用于撤销和重做的按钮。...我们可以用我们的按钮打开弹出窗口，然后在弹出内容窗口外单击关闭它。...假设我们有一个自定义的文本输入，试图为其文本输入的值创建一个v-model。通常情况下，我们必须接受一个 value的 prop，然后发出一个 change 事件来更新父组件中的数据值。...template 中显示 output 的值： Join over {{ Math.round(output) }}+ <...使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。

2.7K3 0

HTML入门的简单学习

指定页面的锚点名称 5.2.3：target属性，作用：定义超链接的打开方式 _blank:在一个新的窗口中打开链接 ..._self(默认值)：在当前窗口中打开链接 _parent:在父窗口中打开页面，框架中使用较多 _top:在顶层窗口中打开文件，框架中使用较多案例运行如下...auto根据需要自动出现，yes有，no无 frameborder:是否需要边框，值1显示边框，值0不显示边框 7.4：frame和iframe的区别　　　　1：frame...name属性：定义控件的名称 value属性：初始化值，打开浏览器时，文本框中的内容 size属性：设置控件的长度 manlength...：当type=hidden时，为隐藏文本框 8.6：多行文本域用法，使用textarea标记可以实现一个，能够输入多行文本的区域语法格式<textarea

4.1K10 0

Excel文件受损基本急救方法四则

)一旦将受损文件打开后，可以先将文件中损坏的数据删除，再将鼠标移动到表格中，并在菜单栏中依次执行“表格”/“转换”/“表格转换成文字”命令； (5)在随后出现的对话框中选择制表符为文字分隔符，来将表格内容转为文本内容...； (6)在Word菜单栏中依次执行“文件”/“另存为”命令，将转换获得的文本内容保存为纯文本格式文件； (7)运行Excel程序，来执行“文件”/“打开”命令，在弹出的文件对话框中将文字类型选择为“文本文件...一旦在编辑文件的过程中，Excel程序停止响应的话，大家可以强制关闭程序；要是由于突然断电导致文件受损的话，大家可以重新启动计算机并运行Excel，这样Excel会自动弹出“文档恢复”窗口，并在该窗口中列出了程序发生意外原因时...”，在出现的文件保存对话框中输入文件的具体名称；程序在缺省状态下，将文件保存在以前的文件夹中； (3)想要查看文件受损修复信息的话，可以直接单击“显示修复”命令； (4)完成了对所有要保留的文件相关操作后...，大家可以单击“文档恢复”任务窗格中的“关闭”按钮； Excel程序在缺省状态下是不会启用自动修复功能的，因此大家希望Excel在发生以外情况下能自动恢复文件的话，还必须按照下面的步骤来打开自动恢复功能

1.2K14 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭