Html 将行号添加到 textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1995370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html adding line numbers to textarea
提问by Hulk
I have a textarea as in code below, how to display the line numbers on the left hand side of it.
我有一个文本区域，如下面的代码，如何在它的左侧显示行号。
Is there a jquery plugin?
有jquery插件吗？
<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>
回答by anatoly techtonik
There is Lined TextAreamirrorplugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+
有内衬的TextArea镜由阿兰·威廉姆森的jQuery插件
MIT许可证
的jQuery 1.3+
回答by ChandrasekarG
You can very well try Code Mirror, which is a JavaScript library for embedding a code editor in a web page.
您可以很好地尝试 Code Mirror，它是一个用于在网页中嵌入代码编辑器的 JavaScript 库。
With code lines, it has great features like
使用代码行，它具有很棒的功能，例如
- Autocompletion
- Themes
- Mixed language modes
- Search
- Merge/diff interface
- Custom scrollbars etc.
- 自动完成
- 主题
- 混合语言模式
- 搜索
- 合并/差异接口
- 自定义滚动条等
回答by Bern
This is a very simple, but effective trick. It inserts an image with the line numbers already added.
这是一个非常简单但有效的技巧。它插入一个已经添加了行号的图像。
The only catch is you may need to create your own image to match your UI design.
唯一的问题是您可能需要创建自己的图像以匹配您的 UI 设计。
https://jsfiddle.net/vaakash/5TF5h/
https://jsfiddle.net/vaakash/5TF5h/
textarea {
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:#ccc;
}
Credit goes to: Aakash Chakravarthy
回答by SoLaR
No one tried to do this using HTML5 Canvas object and by painting line numbers on it. So here what I've managed to pool in few hours. Put canvas and textarea, one next to the other, and painted numbers on canvas.
没有人尝试使用 HTML5 Canvas 对象并在其上绘制行号来做到这一点。所以这里是我在几个小时内设法汇集的。将 canvas 和 textarea 并排放置，并在画布上绘制数字。
https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH
https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH
true there is limitation we can't handle word-wrap easy in Paint() function without iterating entire textarea content and offdrawing to mirror object for measurements of each line height. Also would yield very complex code.
确实存在限制，我们无法在 Paint() 函数中轻松处理自动换行，而无需迭代整个 textarea 内容并绘制镜像对象以测量每个行高。也会产生非常复杂的代码。
回答by SBimochan
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]));ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list) ") ";
counter-increment: list;
}<textarea id="input"></textarea>
<button onClick=generateWithNumber() >Generate</button>
<p id="output"></p>