javascript - 如何在文本区域中实现编号列表

Question

我研究了StackOverflow文本区域中的编号列表，这就是我观察到的

观察结果

1. 当单击编号列表链接时，它会插入类似 1 的内容。列出项目，再次单击时会插入2。列表项
2. 现在，如果您有 3 个列表项，并且您删除了 1。列出项目，然后再次单击该链接，或者分割两行，2.列表项更改为1。列表项 和3 更改为2，留下1。列表项 和2。列出项目 而不是2。列表项 和3。列出项目
3. 现在，如果您有 3 列表项，并且分成两行，键入一些文本并再次单击链接，则列表项从 1 开始。再次列出项目
4. 最后，它会自动检测之前的列表项编号并增加 1。它还会检测列表项的总数，如果前一个是4，而列表项的总数只有两个，它会自动将其更改为1。列表项 和2。列出项目

这是一个简短的video显示我的观察结果。

我想要实现的目标

我想实现 StackOverflow 使用的相同功能。

1. 当我的链接被点击时，它会插入 1。在我的文本区域中列出项目并自动增加，直到检测到两行中断
2. 如果我删除一个列表项并再次单击该链接或分解两行，则删除的链接将分别自动替换，就像我的第二个观察结果
3. 就像我的第三个观察结果一样，如果我分解两行并输入一些文本并再次单击链接，它将从 1 开始。列出项目，而不是我上次停止的项目。

我的工作

下面的代码是我用来在文本区域中添加文本的代码

<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>

我的问题

请问我该如何实现这些。我认为最好的方法是通过 jQuery 和 JavaScript。但如果有任何替代方案，我将不胜感激

Answer 1

你让事情变得比需要的更复杂。您可以轻松地创建一个 contentEditable div 并在每次点击时更改其内容以形成有序列表:

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

确保 div 看起来像文本区域:

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

您可以看到，默认的 HTML 列表属性及其 contentEditable 使得可以轻松删除和添加列表节点，同时保持编号不变。

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

您可以通过创建 2 个按钮来处理添加多个列表的情况。一种创建新列表，另一种将列表项添加到该列表。