jQuery Plugin To Display Line Numbers In Textarea - numberedTextarea

numberedTextarea is a simple-to-use jQuery plugin that dynamically adds line numbers to a standard html textarea while typing.

See also:

• jQuery Plugin For Adding Line Numbers To Paragraphs - Line Number

How to use it:

1. Load jQuery library and the jQuery numberedTextarea plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.numberedtextarea.js"></script>

2. Call the function on the textarea element as follow:

$('textarea').numberedtextarea();

3. Style the line numbers in the CSS.

div.numberedtextarea-wrapper { position: relative; }

div.numberedtextarea-wrapper textarea {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.numberedtextarea-line-numbers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

div.numberedtextarea-number {
  padding-right: 6px;
  text-align: right;
}

4. Customize the plugin using the following options.

$('textarea').numberedtextarea({

  // font color for line numbers
  color: null,

  // border color
  borderColor: null,

  // CSS class to be added to the line numbers
  class: null, 

  // if true Tab key creates indentation
  allowTabChar: false,       

});

---

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