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:
Search Button Animation in CSS & JS
Display Form Fields Based on Selection using jQuery - conditionize
Contact Us Page Template With Dark Mode
Simple Closable Tags in JavaScript
Form Validation in JavaScript Code
JavaScript Search Text on Page and Highlight
JavaScript Get & Set Cursor Position in Textarea
Typing and Erasing Animation CSS and JavaScript
Typing Test Project in JavaScript
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.