javascript - 内容可编辑 div 的行号
问题描述
我正在尝试向可内容编辑的 div 显示行号。所以内容不是静态的,可以像普通编辑器一样进行编辑。到目前为止,我可以添加行号,但是当我添加新行或删除一行时,它的行为不正常。
这是代码。
#textarea {
outline: 0px solid transparent;
padding: 10px 16px;
counter-reset: line;
}
#textarea .lines {
display: block;
}
#textarea .lines:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
margin-right: .5em;
color: #888
}
<div placeholder="Type here..." id="textarea" style="font-size:20px;resize: inline;width: 100%;margin-top: 0px; border: 1px solid #ddd;height: 89vh;overflow-y: auto;" spellcheck="false" contenteditable="">
<span class="lines">India win series 2-1 in the series decider</span>
<span class="lines">India chases a tricky 300+ score at Cuttack with the top 3 contributing once again with their half-centuries. Captain Virat Kohli was adjudged man of the match for his vital 85 runs which indeed guided the team when the openers departed after a century-plus stand.</span>
<span class="lines">Also, Rohit Sharma was awarded man of the series and he also end has the highest run-getter in ODIs this year. Earlier West Indies scored 100+runs in their last 10 overs to set a target of 316 for the hosts to chase. Pollard and Pooran had 100plus stand in quick time to take West Indies to a formidable total.</span>
<span class="lines"></span>
<span class="lines"></span>
</div>
**
所以我想解决这个合并两行并在contenteditable中插入新行的问题
解决方案
推荐阅读
- java - 找不到工件 com.sun:tools:jar:0
- python - 无法使用 pip3 安装 jupyter notebook
- json - 反序列化动态 JSON 对象
- spring - 由于 ora 12519,无法打开 Hibernate Session 进行事务处理
- c# - 使用正则表达式提取子字符串
- c - MinGW编译说头文件丢失,可能是哪个包丢失了?
- c# - 如何在asp.net mvc中将部分视图下载为word文档?
- javascript - Git日志图到数组中
- ruby-on-rails - 从 rspec 获取请求中删除授权
- html - Angular6 - 在下拉列表中渲染图像