The King is The King is - 4 months ago 17
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

Observations




  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
    3
    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
    and
    3
    changes to
    2
    leaving you with
    1. List Item
    and
    2. List Item
    instead of
    2. List Item
    and
    3. List Item

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

  4. Finally, it automatically detects the previous list item number and increases by
    1
    . And it also detects the total amount of list item, if the previous one is
    4
    and the total amount of the list items are just two, it automatically changes them to
    1. List Item
    and
    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>
<script>
$('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.focus();
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>


My Question



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

Answer

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:

HTML

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

JS

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

CSS

Make sure that the div looks like a text area:

#text_area{
  height:auto;
  width:400px;
  background:white;
  border:1px solid silver;
  resize: vertical;
  overflow:auto;
}

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.

https://jsfiddle.net/r9ev1oe9/1/

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.

Comments