Lined Textarea is a lightweight (4 KB only), cross browser and cross platform jQuery plugin to create HTML textarea element with line numbers. The plugin auto / dynamically insert number to each new line of textarea.
You just need to create a standard HTML textarea element, this jQuery plugin will automatically add numbering. You can also highlight specific line of textarea with color.
Plugin Overview
| Plugin: | Lined Textarea |
| Author: | Alan Williamson |
| Licence: | MIT Licence |
| Published: | January 19, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 5.89 KB |
How to Make HTML Textarea with Line Numbers
1. Load the jQuery and lined-textarea‘s CSS and JavaScript file into your HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Lined Textarea CSS --> <link href="css/jquery-linedtextarea.css" rel="stylesheet"> <!-- Lined Textarea JS --> <script src="js/jquery-linedtextarea.js"></script>
2. Create a standard HTML textarea element with class name lined and add your text contents into it.
<textarea class="lined" rows="10" cols="60"> This is some text in textbox. You can also leave it blank. </textarea>
3. Finally, initialize the plugin in jQuery document ready function to active the textbox numbering.
$(document).ready(function(){
$(".lined").linedtextarea();
});
4. If you want to highlight / select specific number in line, you can use the following option.
$(".lined").linedtextarea({
selectedLine: 4
});
5. If you want to customize the styles, you can edit plugin’s CSS file. The default CSS styles are:
.linedwrap {
border: 1px solid #c0c0c0;
padding: 3px;
}
.linedtextarea {
padding: 0px;
margin: 0px;
}
.linedtextarea textarea, .linedwrap .codelines .lineno {
font-size: 10pt;
font-family: monospace;
line-height: normal !important;
}
.linedtextarea textarea {
padding-right:0.3em;
padding-top:0.3em;
border: 0;
}
.linedwrap .lines {
margin-top: 0px;
width: 50px;
float: left;
overflow: hidden;
border-right: 1px solid #c0c0c0;
margin-right: 10px;
}
.linedwrap .codelines {
padding-top: 5px;
}
.linedwrap .codelines .lineno {
color:#AAAAAA;
padding-right: 0.5em;
padding-top: 0.0em;
text-align: right;
white-space: nowrap;
}
.linedwrap .codelines .lineselect {
color: red;
}
Similar Code Snippets:
Check Multiple Checkboxes in JavaScript
Animated Text Using CSS and JavaScript
Custom File Upload Input In JavaScript
JavaScript Search Text on Page and Highlight
Vertical Range Slider Using HTML CSS
HTML5 Text Editor With File Reader API
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.
I am a beginner in Web Development. I have not been able to make this work. The plugin is failing to install. I then manually copied the plugin folders with the \css and \js sub folders and then when I run the code, it just shows the edit box with no numbers. Bascially I am trying to build an online compiler using a rapidapi.com APIs. I already have a web page with two edit boxes, one for input and one for output and I want the input edit box to have row numbers. Any help will be appreciated.