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>

anatoly techtonik

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

ChandrasekarG

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.

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

CodePress is the one used in WordPress.

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