15

I want to display the line number in a textarea like this is possible in jQuery:

enter image description here

I looked for answers on SO but I can't find what I want

Display current line and column number for a textarea

Limit number of lines in textarea and Display line count using jQuery

Also, the solution I tried from the JSFiddle provided from the comments show me the textarea like this:

enter image description here

which line 1234 is the first line and the second line is 5678

James Hill
  • 60,353
  • 20
  • 145
  • 161
aki
  • 1,241
  • 2
  • 13
  • 43
  • possible duplicate of [Html adding line numbers to textarea](http://stackoverflow.com/questions/1995370/html-adding-line-numbers-to-textarea) – James Hill Dec 08 '11 at 13:24
  • @JamesHill i tried didn't work – aki Dec 08 '11 at 13:25
  • I just copied an pasted into a jsFiddle from the first example and got something working in 30 seconds or less - http://jsfiddle.net/JamesHill/jMZKz/ – James Hill Dec 08 '11 at 13:28
  • 1
    What exactly did you try? The linked thread lists a couple of solutions to your problem. If you have tried to implement one of them and it doesn't work, describe what you've tried already and post the code, so we can help you. – Simon Dec 08 '11 at 13:30
  • @Simon i tried the code provided by james – aki Dec 08 '11 at 13:32
  • @aki, the fiddle was an example to get you going. I could be wrong, but I don't think anyone is going to write a fully working piece of code for you. There are plenty of examples coming up in a Google search - try them out. Here's another example using a jquery plugin - http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html – James Hill Dec 08 '11 at 13:36
  • I've created a pen about this, that works well with line wrapping, although that is using JavaScript. Check it if you want: https://codepen.io/CodemasterUnited/pen/oNQexQp – Codemaster United Jul 21 '23 at 14:16

1 Answers1

22

Download the plugin found here: http://alan.blog-city.com/jquerylinedtextarea.htm

Usage:

$(function() {

  // Target all classed with ".lined"
  $(".lined").linedtextarea(
    {selectedLine: 1}
  );

  // Target a single one
  $("#mytextarea").linedtextarea();

});

Fully functional demo: http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html (web.archive)

yellowsir
  • 741
  • 1
  • 9
  • 27
James Hill
  • 60,353
  • 20
  • 145
  • 161
  • 5
    Any solution for those that use `word-wrap: break-word`? – Tyler Crompton Jul 10 '12 at 16:46
  • 3
    Provided link appers dead. New link can be found [here](https://github.com/aw20/JQueryLinedText). Tested plugin witj jQuery 1.8 and it did not work properly as browser hangs (Chrome and Firefox).Trying to narrow problem. – nt.bas Jul 20 '13 at 07:55
  • Any chance you updated it to be responsive so the textarea will resize (and take up the width of it's parent)? Regardless, awesome work! I'll try and edit, but it's pretty high-end in that .js file for me! :) – elbowlobstercowstand Jan 24 '16 at 06:31