alanwilliamson

JQuery Lined TextArea plugin

One of the most used, but under featured HTML controls, is the humble TEXTAREA control. This control is designed to accept large blocks of text from the user. A wide variety of plugins exist for the TEXTAREA that layer it with toolbars, auto-resizing, rich-text editing and the works.

However, for my usage, this was way over kill. I wanted a simple line-number facility that would allow my users easily see where they are. Particuraly handy for editing code online. After searching, I couldn't find one, so I simply created my own plugin.

Quickly and easily to install, very light weight, you simply tell it which TEXTAREA's you want to be line tracked and it will go and do its thing. You can pass if you want a line highlighted. While it doesn't highlight the line inside the TEXTAREA control it highlights the side bar at the relevant place.

<script>
$(function() {

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

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

});
</script>

Try the Online Demo and see it in action.

Installation: Copy the files to your web server and insert the .js and .css file and you are good to go. Requires JQuery 1.3+

Download: jquery-linedtextarea.zip (4 KB)

Comments

Hi Alan, your script is an Excellent initiative! Im reporting buggy behavior under FF 3.6 and Chrome 5 (osX10.6) , the full stack of line numbers are stuck "above" the text area. Once you touch the text area vertical scrool, the whole area dissapears. In my opinion, crossbrowser compat is the first and most important thing in coding standards. Cheers

left by Samuel Charmetant — Friday, 25 June 2010 9:22 AM — web site

Nice plugin. Do you know the TinyMce editor? It is using an iframe and all contents are added inside an iframes. Is it hard to modify your plugin to make it work with tinymce?

left by Stefan Wagner — Monday, 31 May 2010 9:09 AM

An awesome and simple plug, works in IE7.

Is it possible to leave it resizable in Chrome, and add this resizability for other browsers as well?

Have you considered to put this to some site like BitBucket, so people can send patches?

left by anatoly techtonik — Friday, 23 April 2010 10:49 AM

Hi, it seems to not work in opera (10.10 in Windows Vista and 10.5 in Mac) and work partially in IE (8 in Windows Vista). It works well in Chrome, FF and Safari. I throw away most of your wrapping code since it work same without. At least for me.

left by Mihkel — Sunday, 24 January 2010 4:49 PM

Very nice. Any way to highlight the CURRENT LINE # the user (caret) is on (and follow along when then move to different lines?

Thanks!

left by OneNerd — Friday, 22 January 2010 1:46 AM

@Francis: Looks like Opera is not sending the onscroll event from the textarea control. I'll take a look at that.

The IE bug has been fixed. Try again.

left by Alan Williamson — Friday, 8 January 2010 11:09 AM

Nice to know something like this exists. But unfortunately, the demo does not work very well under two browsers I tried, IE 8 and Opera 10.1.

In IE 8, the textarea is shifted on to the next line, while the line-numbers are above the textarea.

In Opera 10.1, it shows up properly aligned (but with some white space where there shouldn't be I guess) but the when you scroll down or enter new lines, the line numbers are not updated or scroll.

Keep at it, hopefully it will be perfect and cross-browser compatible.

left by Francis Adu-Gyamfi — Friday, 8 January 2010 10:59 AM — web site

@Randy .. you are right it does. I confess I don't use Chrome as it doesn't seem to like Windows7:64 terribly well. Runs like a dog. Anyway, I have made some updates and it works fine now under Chrome.

Thank you for letting me know. Appreciate it.

left by Alan Williamson — Friday, 8 January 2010 10:44 AM

Looks a little weird in Google Chrome: http://rookery5.aviary.com/storagev12/2820500/2820718_62e2_625x625.jpg

left by Randy Johnson — Thursday, 7 January 2010 5:50 PM — web site

Just made an update to cope better with the horizontal space. Before I was adding extra space to fit in the codelines, which wasn't good. I am now using the original space the TEXTAREA occupied and resizing the TEXTAREA to fit in there.

Also made some changes to the code that speeds up the creation process.

left by Alan Williamson — Thursday, 7 January 2010 12:00 PM

Nice!

left by Jason R Briggs — Wednesday, 6 January 2010 12:43 PM — web site

Leave Comment

please note, all comments will be moderated for spam and abuse before being publicly posted.

Article Details