开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在内容可编辑的元素中粘贴多行文本，使每一行始终位于其自己的div中？

在内容可编辑的元素中粘贴多行文本，使每一行始终位于其自己的div中，可以通过以下步骤实现：

创建一个包含多个div的父容器，用于容纳每一行文本的div。
将内容可编辑的元素设置为只接受纯文本粘贴，以避免复制格式。
监听粘贴事件，获取粘贴的文本内容。
将获取到的文本内容按行分割成数组。
遍历文本行数组，为每一行创建一个div，并将文本内容插入到div中。
将每个div添加到父容器中。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .line {
      border: 1px solid #ccc;
      padding: 5px;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script>
    var container = document.getElementById('container');
    var editableElement = document.createElement('div');
    editableElement.contentEditable = true;
    container.appendChild(editableElement);

    editableElement.addEventListener('paste', function(e) {
      e.preventDefault();
      var text = e.clipboardData.getData('text/plain');
      var lines = text.split('\n');

      lines.forEach(function(line) {
        var div = document.createElement('div');
        div.className = 'line';
        div.textContent = line;
        container.appendChild(div);
      });
    });
  </script>
</body>
</html>

这段代码创建了一个父容器div，并在其中创建了一个内容可编辑的div。当在内容可编辑的div中粘贴多行文本时，会触发粘贴事件，将每一行文本分割成数组，并为每一行创建一个div，最后将这些div添加到父容器中。每个div都有一个类名为"line"，并且具有一些基本的样式，如边框、内边距和外边距。

这种方法可以确保每一行始终位于其自己的div中，方便对每一行文本进行样式和操作。

相关搜索:如何检查文本光标是否在可内容编辑的div中？如何捕获在可内容编辑的div中单击的特定字符如何使文本在表格行中居中，使其始终位于屏幕可见区域的中心如何将粘贴的HTML代码转换为内容可编辑的div中的纯文本，不包括特殊的HTML元素？在可编辑内容元素中剪切或粘贴:从输入事件中获取受影响文本的长度如何在可内容编辑的div中重新生成innerHTML后在单词中间设置插入符号位置如何将填充内容保持在可满足的div中，就像在文本区域中一样？区块链上交易所区块链是指什么布比区块链搭建

相关搜索:

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

有帮助

没帮助

相关·内容

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑面包屑包含当前页面的父页面的链接列表，该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。...当呈现的内容是表格时，从 grid 和 table 中选择实现模式时，考虑以下因素。 grid 是一个复合小部件，所以它：始终包含多个可聚焦元素。在页面Tab序列中只有一个可聚焦元素。...grid 还可以提供诸如单元格内容编辑，选择，剪切，复制和粘贴等功能。在一个呈现表格数据的 grid 中，每一个单元格都包含一个可聚焦的元素或其单元格本身可聚焦，无论单元格内容是否可编辑或可交互。...在应用阅读模式时，屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。因此，屏幕阅读器用户可能会在不知情的情况下忽略网格中包含的元素，当它们不可聚焦或不用于标记列或行。...例如，消息的收件人列表可能是个网格，其每个单元格包含一个代表收件人的链接。网格最初可能只有一行，但是随着收件人的添加，会变为多行。

6.2K5 0

HTMLCSS基础知识学习笔记

代码，通常是一行内多行代码多行代码,你需要在网页中预显示格式时都可以使用它 ul-li...，如栏目版块 … div 带上ID号，使之更清晰表格内容创建表格 <caption...文本域（多行文本）默认文本内容 cols：多行输入域的列数 rows...块状元素： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。...因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响举例： #div1{

2.1K1 0

Material Design — 菜单（Menus）

单个菜单项状态某些app状态可能会导致只有一个菜单项的情景菜单。例如，当使网页上的文本高亮时，Android仅显示“复制”菜单项，因为用户无法“剪切”或“粘贴”文本。 ?...情景菜单菜单是可滚动的如果菜单高度阻止其显示所有菜单项目，菜单可以在内部滚动。一个例子是在横向上查看手机上的菜单。 ?...例如，重做在没有任何可重做的操作时被禁用。剪切和复制在没有选择内容时不可用。 ? 不可用的例子 ---- 行为菜单出现在app内所有其他UI元素之上。 ?...·简单菜单始终在屏幕的左侧和右侧保持16dp的留白（手机）或24dp留白（平板）。 ? ·如果简单菜单中的文本长到需要换行，就改为使用Simple Dialogs，因为可以有不同高度的行（如下图）。...·内容可滚动时，菜单一直显示滚动条。 ·简单菜单的最大高度应小于页面高度的一行或多行。这确保了可点击简单菜单之外的区域来关闭菜单。 ·不在菜单中重复展示已选项（同Menus）。

5.8K10 0

17个场景，带你入门CSS布局

单行文本的垂直居中。只需设置高度等于行高。如 height: 25px; line-height: 25px; 多行文本的垂直居中可以用 "场景12 多个元素的垂直居中" 中的方法。...场景09 多个块级元素的在一行或多行中显示用 Flex 布局可以实现多个块级元素的在一行或多行中显示。Flex 布局的 Flex项目，会在一行中显示。...代码： .container { display: flex; align-items: center; } 场景13 元素始终位于父元素右上角可以用绝对定位来实现元素始终位于父元素右上角...实现元素始终位于父元素右上角的做法：将父元素设置为定位元素，子元素设置为绝对定位元素即可。...; } .child { position: absolute; top: 0; right: 0; } 场景14 元素始终位于页面的右下角可以用固定定位来实现元素始终位于页面的右下角

2.6K2 0

最新前端Vue代码风格指南大全

export default { name: 'ToDoList', // ... } 1.3.2 prop 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX...-- 在 DOM 模板中 --> 1.3.5 自闭合组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM...甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)[2]。...多个 attribute 的元素应该分多行撰写，每个 attribute 一行。...注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。推荐： … 不推荐 …<!

3.7K2 0

编写高质量可维护的代码：一目了然的注释

-- 这是一行被注释的文字 --> 二、CSS 中的注释在 .html 文件中 div { /* color: #fff; */ } 在 .css 文件中 div { /* color: #fff; */ } 在 .less 或 .scss 文件中 div { /* color: #fff;*/ /* 多行注释*/...任何位于 /* 和 */ 之间的文本都会被注释 /* 这是多行注释定义一个数组 */ var ary = []; 用注释来阻止代码执行 —— 被注释的 JS 代码将不被执行 //alert(...，要改进的地方会在说明中简略说明 NOTE 在该注释处说明代码如何工作 HACK 在该注释处编写得不好或格式错误，需要根据自己的需求去调整程序代码 BUG 在该注释处有 Bug // TODO功能未完成...尽量使用单行注释代替多行注释注释函数时，推荐使用多行注释 /* 这里有一行注释这里有一行注释这里有一行注释 */ 函数注释其间每一行都以 * 开头，且与第一行第一个

1.1K2 0

Android开发人员初识前端

2、q、blockquote对文本进行引用标签是对短文本进行引用，其样式是对文本添加双引号，标签是对长文本进行引用，其样式是对文本进行缩进。...7.4、td表示表格的一个单元格，一行中包含几对td标签，说明一行中就有几列。 7.5、th表示表格的头部，表格表头 7.6、表格中列的个数，取决于一行中数据单元格的个数。...）可以使用text-align样式代码为块状元素中的文本、图片设置居中样式。...也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。特征：第一，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

2.3K3 0

Vim文本编辑器

光标停在空行首，等待输入文本 O（大写）在光标所在行的上面插入新的一行。...行到 a2 行的文本内容 Vim复制和粘贴文本快捷键功能描述 p 将剪贴板中的内容粘贴到光标后 P（大写）将剪贴板中的内容粘贴到光标前 y 复制已选中的文本到剪贴板 yy 将光标所在行复制到剪贴板...，此命令前可以加数字 n，可复制多行 yw 将光标位置的单词复制到剪贴板 Vim 保存退出文本命令功能描述 :wq 保存并退出 Vim 编辑器 :wq!...保存文本，并退出 Vim 编辑器，更通用的一个 vim 命令 ZZ 直接退出 Vim 编辑器 Vim显示行号在命令模式下输入":set nu"即可显示每一行的行号如果想要取消行号，则再次输入"...y 将选中部分复制到剪贴板中。 p（小写）将剪贴板中的内容粘贴到光标之后。 P（大写）将剪贴板中的内容粘贴到光标之前。 u（小写）将选中部分中的大写字符全部改为小写字符。

1.9K2 0

史上最全 Vue 前端代码风格指南

export default { name: 'ToDoList', // ... } 复制代码 1.3.2 prop 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和...-- 在 DOM 模板中 --> 复制代码 1.3.5 自闭合组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——...甚至在元素上维护可预测的行为，比如动画中的对象固化 \(object constancy\)[2]。...多个 attribute 的元素应该分多行撰写，每个 attribute 一行。...注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。推荐： ... 复制代码不推荐 ...

3.2K2 0

前端系列教学 - HTML基础

（在后面需要时在详细讲解）属性所包含的信息并不会出现在实际的内容中。上面这个例子里，class属性给元素赋了一个可供识别的类名。之后可以通过这个名字去为其定义样式信息。...在前面的学习中，我们发现有的元素独占一行（例如：, - ），有的元素可以几个排列在同一行（例如：, , ）块级元素在浏览器上表现为占据整行，不与其他元素共在同一行...表格内部的边框仍旧是1px宽。标题标签：使用标签可以定义表格标题。其必须紧随开始标签之后。默认位于整个表格的第一行，一个表格只有一个标题。...#### 多行文本区域使用标签定义一个多行的文本输入控件。...可以通过 cols（列）和 rows（行）属性来规定 textarea 的尺寸大小表单目前我们先介绍这么多，当然表单可远远没这么简单。我们在实际开发中还要学会自己多查资料。

7.1K11 0

CSS基本知识(慕课网)

3、类选择器、ID选择器　　注解：　　　　1）、类选择器类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。...　　　　注解：　　　　　　　　当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：　　　　　　　　　　　　...③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。　　　　　　　　　如何将一个元素设置为块状元素？　　　　　　　　　　...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...举例如下： html代码：我是第一行文本我是第二行文本

2.2K6 0

一篇史上最全面的 Vue 代码风格指南，建议收藏

export default { name: 'ToDoList', // ... } 复制代码 1.3.2 prop 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和...-- 在 DOM 模板中 --> 复制代码 1.3.5 自闭合组件在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——...甚至在元素上维护可预测的行为，比如动画中的对象固化 \(object constancy\)[2]。...多个 attribute 的元素应该分多行撰写，每个 attribute 一行。...注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。推荐： ... 复制代码不推荐 ...

1.9K3 1

Linux Vim编辑器的基本使用

在VIM编辑器中，剪切与删除都是dd 如果剪切了文件，但是没有使用p进行粘贴，就是删除操作如果剪切了文件，然后使用p进行粘贴，这就是剪切操作 ① 剪切/删除当前光标所在行按键：dd （删除之后下一行上移...② 剪切/删除多行（从当前光标所在行开始计算）按键：数字dd 粘贴：p 特殊用法： ③ 剪切/删除光标所在的当前行（光标所在位置）之后的内容，但是删除之后下一行不上移按键：D （删除之后当前行会变成空白行...针对整个文档中的所有行进行替换，只替换每一行中满足条件的第一个结果 :%s/要替换的关键词/替换后的关键词案例：把每一行中的第一个hello关键词都替换为hi :%s/hello/hi ④ 针对整个文档中的所有关键词进行替换...问题：在终端Vim中粘贴代码时，发现插入的代码会有多余的缩进，而且会逐行累加。原因是终端把粘贴的文本存入键盘缓存（Keyboard Buffer）中，Vim则把这些内容作为用户的键盘输入来处理。...命令模式 + i ： insert缩写，代表在光标之前插入内容命令模式 + a ： append缩写，代表在光标之后插入内容 3）退出编辑模式在编辑模式中，直接按Esc，即可从编辑模式退出到命令模式

3.2K2 1

Vim编辑器

这次浅聊一下 Vim编辑器，它是由 vi 发展演变过来的文本编辑器，是 Linux众多发行版的默认文本编辑器。内容如下。...b、剪切/删除多行 (从当前光标所在行开始计算)按键：数字dd粘贴：p特殊用法：c、剪切/删除光标所在的当前行(光标所在位置)之后的内容，但是删除之后下一行不上移按键：D (删除之后当前行会变成空白行).../centos7.6/g③针对整个文档中的所有行进行替换，只替换每一行中满足条件的第一个结果:%s/要替换的关键词/替换后的关键词案例：把每一行中的第一个 hello关键词都替换为 hi:%s/hello...问题：在终端Vim中粘贴代码时，发现插入的代码会有多余的缩进，而且会逐行累加。原因是终端把粘贴的文本存入键盘缓存（Keyboard Buffer）中，Vim则把这些内容作为用户的键盘输入来处理。...2）可视化模式复制操作第一步：在命令模式下，直接按小v ，进入可视化模式第二步：使用方向键↑↓← →选择要复制的内容，然后按 y 键第三步：移动光标，停在需要粘贴的位置，按 p 键进行粘贴操作3）为配置文件添加多行注释

8522 2

【愚公系列】2023年11月 Winform控件专题 TextBox控件详解

如果将ReadOnly属性设置为true，则用户不能在文本框中输入任何字符，但是可以复制和粘贴文本框中的内容。如果将ReadOnly属性设置为false，则用户可以在文本框中输入和编辑内容。...用户无法在文本框中输入或编辑任何内容。1.7 ShortcutsEnabledShortcutsEnabled属性是Winform中设置快捷键是否开启的属性，其类型为bool。...Lines = new string[] { "第一行", "第二行", "第三行" };这样就可以在文本框中显示多行文本了。...需要注意的是，Lines属性中的每一行文本都应该是一个字符串数组的元素，每个元素代表一行文本。如果要设置某一行的文本，只需要修改对应的元素即可。...只读显示：将TextBox控件的ReadOnly属性设置为“True”，以实现只读显示功能，用户不能编辑该文本框中的内容。

5082 3

CSS_Flex 那些鲜为人知的内幕

它们会尽量占用尽可能多的水平空间，同时尽量减少垂直空间的占用。内联元素在水平方向上像段落中的文本一样显示在一起。...替换元素在 CSS 中，替换元素（Replaced Element）是指一个由浏览器根据元素的标签和属性创建的、在渲染时展示的元素，而「不是由文档中的内容决定其显示的元素」。...无论我们如何增加flex-shrink,内容将溢出而不是继续缩小！ ❞ 文本输入框的默认最小大小为 170px-200px（在不同的浏览器之间有所变化）。在其他情况下，限制因素可能是元素的内容。...实际上，「每一行都充当其自己的小型 Flex 容器」。 ❞ 当我们有多行时，交叉轴现在可能与多个项目相交！ >> ❝每一行都是其自己的小型 Flexbox 环境。...在每一行内，align-items允许我们将每个单独的子项上下滑动。然而，在整体上，我们有两行在一个单一的 Flex 上下文内！现在，交叉轴将与两行相交，而不是一行。

2851 0

CSS基础布局

* 早期以table为主(简单) * 之后以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局在移动端大行其道的时代是必备的 * table表格布局 * float...Flexbox * flexbox是有弹性的，可伸缩的 * flexbox本身就是可以并列的 * 可以指定宽度使用float布局 * 元素设置float后，元素就脱离了文档流，但是不会脱离文本流。...span默认是 inline元素，而inline元素是不能设置宽高的，这里span为什么会有宽高？ float使span成为了一个BFC块，使得span可以设置宽高。...由于纵向是由每一行堆叠起来的，重复的布局一行的内容，就可以了。所以布局重点就是把块横向的排布开来。...比如侧边栏友情链接和很大的footer 在移动端就不显示了。折行：在pc端横向排布的若干个东西，在移动端可以一行显示两个分多行显示。

2.9K2 0

测试需求平台11-产品管理交互Acro必要组件掌握

输入框 Input 光标位于输入框时，允许用户输入或编辑文本内容的基本表单组件。...，不应包含完成任务所需的重要信息; 前缀图标：用于描述输入框中可输入的内容及格式（如：电话、日期图标）；后缀图标：根据不同场景具有多样的功能，常用场景如下：错误提示，可与辅助文字中的错误提示结合出现...组件类型单行输入框 : 仅可输入一行文本，需当输入内容超出输入框时，内容截断; 多行输入框: 高度自适应的输入框，支持输入多行文本，当输入多行文本时，输入框容器随内容向下扩展; 文本域：可拉动右下角调节标来调节宽高尺寸的多行文本输入框...在只设置图标时，按钮的宽高相等样式按钮可以指定大小、形状和状态、线性、文本等组合按钮通过组件使按钮以组合方式出现。...可用在同级多项操作中基本用法在需要渲染位置上引用，其内为Props`Events\Slots`配置，><内为文本 <a-space

2882 0

【Linux】深入理解awk命令

此外，还可以进行复制、粘贴、替换和删除等编辑操作，以便对文件内容进行修改和调整。假设我们在test目录下，现在有一个file.txt的文本文件，我们使用vim file.txt打开该文件。...：复制光标所在行内容 nyy：复制光标所在位置向下的n行，包括光标所在的行 yw：复制光标所在处到词尾的内容（相当于复制一个单词） p：粘贴 np：对复制的内容进行多行粘贴...这三种插入方式有所不同： i：在光标所在位置插入输入的字符 a：在光标所在位置的下一个字符处插入输入的字符 o：在光标所在行的下一行插入新行，光标位于行首当我们进入插入模式后，可以看到左下角的状态...如果输入的数字超过了文档的总行数，则会自动跳转到最后一行。 2、搜索在Vim编辑器中，想要搜索一个关键词？只需在末行模式中输入/加上关键词或者?加上关键词，并按下回车键即可立即找到该关键词。...同理，如果想要删除多行文本，也可以按照类似的方式操作，不过命令由y变成了d。另外，如果你想要替换文本中的内容，可以使用r键进行替换操作。

1411 0

(第一版)知识点

(问题) 分页的练习块元素如何在同一行显示？...需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。...:first-child 伪类将应用于元素在页面中第一次出现的时候伪元素 :first-letter 伪元素的样式将应用于元素文本的第一个字（母）。...:first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。 :after 在元素内容的最后面添加新内容。...伪元素和伪类的区别：与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭