line numbers using jquery

Question

  <div id="line_numbers"></div>
  <textarea cols="65" rows="15" name="comments" id="comments"></textarea>
  <textarea cols="65" rows="15" name="matches" id ="matches"></textarea>

there are many examples out there( http://stackoverflow.com/questions/1995370/html-adding-line-numbers-to-textarea ) but i just want to implement line numbers for a text area using jquery.Please let me know how to go about it.Any help would be really appreciated

Answer 1

I haven't looked into any plugins. However, here's a simple way for you to get started.

CSS:

#line_numbers {clear:both; float: left; text-align: right}

jQuery:

   $("#comments").change(function() {
     var comment_lines = $("#comments").val().split('\n');      
     $("#line_numbers").html('');
     for(i = 0; i < comment_lines.length; i++) {
        $("#line_numbers").html($("#line_numbers").html() + (i+1) + "<br/>");
     }
   });

Answer 2

I've never used it, but there's also the JQuery Lined TextArea plugin.