Menu
I have a <textarea /> as in the code below. How do I display the line numbers on the left hand side of it?
Is there a jQuery plugin?
<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA> 
837
Style the Textarea We can use the built-in counter function in CSS in combination with counter-increment to add the line numbers. The counter function expects an arbitrary name that we define for counter-increment . This is going to add the content inside a ::before pseudo-element.
When you want to display a code listing with HTML, you use a <pre> tag in order to indicate that the text is preformatted, then inside one or multiple <code> tags to specify it is a code.
To add line breaks to a textarea, use the addition (+) operator and add the \r\n string at the place where you want to add a line break, e.g. 'line one' + '\r\n' + 'line two' . The combination of the \r and \n characters is used as a newline character. Here is the HTML for the examples in this article. Copied!
The variable lineHeight is set to the numeric value of the style property line-height of our TextArea . The variable tr represents the text in our TextArea and holds its dimensions as bounding properties. We divide the property boundingHeight by lineHeight to get the number of lines our text occupies.
There is Lined TextArea (Link no longer valid, see mirror) plugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
