Adding Line Numbers to HTML Textarea

Add line numbers to text area using javascript

Man I wasted so much time on using javascript when css magic would just have done the trick.

Here is how I did it,

body {
    background-color: #000;
    height: 100vh;
    width: 100vw;
    margin: 0px;
}

.editor-wrapper {
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
    counter-reset: line;
}
.editor{
    margin: 0;
    border: 0;
    padding: 0;
    outline: 0;
    list-style: none;

    height: 100%;
    width: 100%;
    word-wrap: break-word;
    word-break: break-all;

    font-size:2rem;
    line-height: 1.5em;
    font-feature-settings: common-ligatures; 
    -ms-font-feature-settings: common-ligatures;
    color:rgba(255, 255, 255, 0.7);
    resize:none;

}

.editor div {
    padding-left: 5rem;
    position: relative;
}

.editor div::before {
    counter-increment: line;
    content: counter(line);
    font-size: 1em;
    user-select: none;
    width: 5rem;
    text-align: right;
    left: 0;

    position: absolute;
}

<div class="editor-wrapper">
    <div class="editor" contenteditable="true">
        <div></div>
    </div>
</div>

Textarea with alternate rows and line numbers

You could combine them by wrapping your textarea in a div then assign the stripped background styles to that wrapping div, so the 2 backgrounds are like layered.

textarea {  background: url(http://i.imgur.com/2cOaJ.png);  background-attachment: local;  background-repeat: no-repeat;  padding-left: 35px;  padding-top: 10px;  border-color: #ccc;
  font-size: 13px;  line-height: 16px;}
.textarea-wrapper {  display: inline-block;  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);  background-size: 100% 32px;  background-position: left 10px;}

<div class="textarea-wrapper">  <textarea rows="10" cols="40"></textarea></div>

How can I add line numbers to a textarea using an ordered list?

It's important to set the margin and paddingof both textarea and the ol to 0. Because font properties are not inherited by textarea, you need to set them to inherit.

.container{
        position: relative; 
        margin: 20px;
        font-family:"Lucida Console", Monaco, monospace;
        font-size: 100%;
        line-height: 120%;
    }
    .container .list {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 25px;
        background-color: green;    
    }
    .container .list ol {
        margin: 0;
        padding: 0;
        list-style-position: inside;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    .container .list ol li{
        padding-left:5px;   
    }
    .container .textarea {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
    }
    .container .textarea textarea {     
        width:300px;
        height: 200px;
        margin: 0;
        padding: 0 0 0 30px;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        border: 1px solid black;
        
    }

<div class="container">
    <div class="list">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="textarea">
        <textarea></textarea>
    </div>
</div>

Display Line number in textarea without jquery

textarea
{
 background: url(http://i.imgur.com/2cOaJ.png);
 background-attachment: local;
 background-repeat: no-repeat;
 padding-left: 35px;
 padding-top: 10px;
 border-color:#ccc;
 line-height:16px;
}

How to add line numbers to textarea only with pure Javascript?

From what I gathered from your question this what I believe you need. Hopefully it will get you going in the right direction.

var textAreaID = "user-input";
//turn the text area content into an arrayvar content = document.getElementById(textAreaID).innerHTML.split("\n");
//create array to hold new Contentvar newContent = [];
//loop through and add line numbersfor (var i = 0; i < content.length; i++) { //begin for loop

  //append the line numbers and the new value to the newContent array  newContent.push((i + 1) + content[i] + "\n");

} //end for loop

//update the content of textArea with line numbersdocument.getElementById(textAreaID).innerHTML = newContent.join("");

<textarea id="user-input" name="user-input" rows="15" cols="40">

      Hello is it working?
      I think so.

</textarea>

Display line number in textarea

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)

Getting Line Number In Text Area

This works with button click. Stolen from Find out the 'line' (row) number of the cursor in a textarea

function getline()
{
    var t = $("#t")[0];
    alert(t.value.substr(0, t.selectionStart).split("\n").length);
}

HTML

<textarea rows="6" id="t">
there is no
love in the ghetto
so come here
and get it
</textarea>
<input type="button" onclick="getline()" value="get line" />