The King is The King is - 1 year ago 103
jQuery Question

How to implement a numbered list in a textarea

I studied the StackOverflow numbered list in the textarea and this is what I observered


  1. When the numbered list link is clicked, it inserts something like this
    1. List Item
    and when clicked again it inserts
    2. List item

  2. Now if you have like
    list items and you eraze
    1. List Item
    and you click the link again or you breakdown two lines, the
    2. List item
    changes to
    1. List Item
    changes to
    leaving you with
    1. List Item
    2. List Item
    instead of
    2. List Item
    3. List Item

  3. Now if you have
    list items and you breakdown two lines, type some text and click the link again, the list item start from
    1. List Item

  4. Finally, it automatically detects the previous list item number and increases by
    . And it also detects the total amount of list item, if the previous one is
    and the total amount of the list items are just two, it automatically changes them to
    1. List Item
    2. List Item

This is a short video showing my observations.

What I want to achieve

I want to implement the same features StackOverflow uses.

  1. When my link is clicked it inserts
    1. List Item
    in my textarea and auto-increases until two line break-downs are detected

  2. If I eraze a list Item and click the link again or break down two line, the erazed link is been replaces automatically and respectively just like my No.2 observation

  3. Just like my third observation, if I break-down two lines and type in some texts and click the link again, it starts from
    1. List Item
    and not from the last one I stopped.

My work

This code below is what I use to add a text in a textarea

<a href="javascript:;" alt="text to add into textarea">click here for numbered list</a>
<textarea id="text_area"></textarea>
$('a').click(function () {
var text = $(this).attr('alt');
ins2pos(text, 'text_area');

function ins2pos(str, id) {
var TextArea = document.getElementById(id);
var val = TextArea.value;
var before = val.substring(0, TextArea.selectionStart);
var after = val.substring(TextArea.selectionEnd, val.length);

TextArea.value = before + str + after;
setCursor(TextArea, before.length + str.length);


function setCursor(elem, pos) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.moveEnd('character', pos);
range.moveStart('character', pos);;

My Question

Please how do I achieve these. I think the best way to do it is through
. But if there are any alternatives I would appreciate

Answer Source

You are making this more complicated than it needs to be. You can easily just create a contentEditable div and alter it's contents for an ordered list every time the click is fired:


<a href="javascript:;">click here for numbered list</a>
  <div id="text_area" contentEditable="true">


$('a').click(function () {
    $('ol').append("<li class='list-item'></li>");
      $(this).text('List Item');


Make sure that the div looks like a text area:

  border:1px solid silver;
  resize: vertical;

You can see that the default HTML list properties along with it being contentEditable makes it easy to delete list nodes and add them while keeping the numbering intact.

You can handle situations of adding more than one list by creating 2 buttons. One that creates a new list, and one that adds list items to that list.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download