Html adding line numbers to textarea

问题

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?

<TEXTAREA name=\"program\" id=\"program\" rows=\"15\" cols=\"65\" ></TEXTAREA>

回答1:

There is Lined TextArea ^mirror plugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+

回答2:

You can very well try Code Mirror, which is a JavaScript library for embedding a code editor in a web page.

With code lines, it has great features like

Autocompletion
Themes
Mixed language modes
Search
Merge/diff interface
Custom scrollbars etc.

回答3:

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.

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

回答4:

CodePress is the one used in WordPress.

回答5:

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.

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.

preview image

来源：https://stackoverflow.com/questions/1995370/html-adding-line-numbers-to-textarea

标签

html

textarea