StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A few lines of JavaScript will do the trick. <a href="http://jsfiddle.net/mkWhy/1/" rel="nofollow">http://jsfiddle.net/mkWhy/1/</a> You just handle the onkeyup event of the textarea, split the current text into lines (split on the new line character '\n'), loop through those lines and make sure the beginning of each line has the correct number.</p> <pre><code><textarea id="num" rows="5" cols="32">1. </textarea> </code></pre> <p>Plain JS </p> <pre><code>document.getElementById("num").onkeyup = function(e) { var evt = e ? e : event; if((evt.keyCode && evt.keyCode != 13) || evt.which != 13) return; var elm = evt.target ? evt.target : evt.srcElement; var lines = elm.value.split("\n"); for(var i=0; i<lines.length; i++) lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i+1) + ". "); elm.value = lines.join("\n"); } </code></pre> <p>jQuery</p> <pre><code>$("#num").keyup(function(event) { if(event.which != 13) return; var elm = $(this); var lines = elm.val().split("\n"); for(var i=0; i<lines.length; i++) lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i+1) + ". "); elm.val(lines.join("\n")); }); </code></pre> <p><strong>EDIT</strong> This is more inline with the OP's question, a jsfiddle type numbered text input. <a href="http://jsfiddle.net/qZqX8/" rel="nofollow">http://jsfiddle.net/qZqX8/</a></p> <p>I use two textarea's have the first set to readonly and have them blot next to eachother. Then use the keyup and the scroll events on the input textarea. To keep the height and scroll position synchronized.</p> <pre><code>$(".numbered").scroll(function(event) { $(this).prev().height($(this).height()); $(this).prev()[0].scrollTop = this.scrollTop; }); $(".numbered").keyup(function(event) { var elm = $(this); var lines = elm.val().split("\n"); var numbers = ""; for(var i=0; i<lines.length; i++) numbers += (i+1) + "\n"; elm.prev().val(numbers); elm.prev()[0].scrollTop = this.scrollTop; }); </code></pre> <p><strong>EDIT 2</strong> Here's a version that's similar to JSFiddle.net 's editor. I don't handle the text highlighting, shift, or arrow keys, but enter and backspace work. <a href="http://jsfiddle.net/gqHgb/" rel="nofollow">http://jsfiddle.net/gqHgb/</a></p> <p>HTML</p> <pre><code><div id="ref_line" style="display:none"> <div class="line"><div class="lineno"></div><pre contenteditable="true"> </pre></div> </div> <div class="editor"> </div> </code></pre> <p>CSS I'm using the CSS counter() to handle line numbering</p> <pre><code>.editor { margin-left: 2em; counter-reset: lnno; } .editor .line { poisition: relative; } .line .lineno { position: absolute; left: 0px; width: 2em; color: blue; text-align: right; } .line .lineno:before { counter-increment: lnno; content: counter(lnno); } .line pre { position: relative; overflow: visible; white-space: pre-wrap; word-break: normal; word-wrap: break-word; } </code></pre> <p>JS jQuery</p> <pre><code>// setup editors $(".editor").each(function() { $(this).append($("#ref_line").html()); }); // line focus / blur $(".editor").on("focus", ".line pre", function() { var pre = $(this); if(pre.text() == " ") pre.text(""); }); $(".editor").on("blur", ".line pre", function() { var pre = $(this); if(pre.text() == "") pre.text(" "); }); // line add / remove $(".editor").on("keydown", ".line pre", function(event) { var pre = $(this); if(event.which == 13) { event.stopPropagation(); event.preventDefault(); pre.parent().after($("#ref_line").html()); pre.blur(); pre.parent().next().find("pre").focus(); } else if(event.which == 8 && pre.text() == "" && this != pre.parents(".editor").find("pre:first")[0]) { var back = pre.parent().prev(); pre.parent().remove(); back.find("pre").focus(); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload