Add Line Number In Textarea - jQuery LinedTextArea

File Size: 5.18 KB
Views Total: 5957
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Add Line Number In Textarea - jQuery LinedTextArea

The jQuery LinedTextArea plugin converts the normal textarea element into a scrollable content-editable area with line numbers.

The plugin displays a line number count column to the left side of the textarea element.

How to use it:

1. Add references to jQuery library and the LinedTextAear plugin's files.

<script src="" 
<script src="jquery-linedtextarea.js"></script>
<link href="jquery-linedtextarea.css" rel="stylesheet">

2. Class up your textarea with a given class, or target it directly with JQuery Selectors.

<textarea class="lined">
  Editable Content Here
$(function() {

3. Auto scroll the textarea to a spcific line on init.

$(function() {
    selectedLine: 10

This awesome jQuery plugin is developed by aamelkov. For more Advanced Usages, please check the demo page or visit the official website.