如何在文本区域中实现编号列表 [英] How to implement a numbered list in a textarea

问题描述

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

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

1. 单击编号列表链接时，它会插入类似1. List Item的内容，再次单击时，它会插入2. List item
2. 现在，如果您喜欢3列表项，并且删除了1. List Item，然后再次单击链接，或者细分了两行，则2. List item更改为1. List Item，而3更改为2您使用1. List Item和2. List Item而不是2. List Item和3. List Item
3. 现在，如果您有3个列表项，并且细分了两行，请键入一些文本，然后再次单击链接，列表项将从1. List Item重新开始
4. 最后，它会自动检测上一个列表项编号，并增加1.并且还会检测列表项的总数，如果前一个是4并且列表项的总数只有两个，它将自动将它们更改为1. List Item和2. List Item

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

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

I want to implement the same features StackOverflow uses.

1. 单击我的链接后，它将在我的文本区域中插入1. List Item并自动增加，直到检测到两个行发生故障为止
2. 如果我擦除列表项并再次单击链接或断开两行，则擦除的链接将自动替换，就像我的第二个观察值一样
3. 就像我的第三次观察一样，如果我分解两行并键入一些文本并再次单击该链接，则它从1. List Item开始，而不是从我停止的最后一个开始.

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.

我的工作

下面的这段代码是我用来在textarea中添加文本的

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>

我的问题

请我如何实现这些目标.我认为最好的方法是通过jQuery和JavaScript.但是，如果有其他选择，我将不胜感激

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

推荐答案

在这里，我做了一些看起来很像stackoverflow的项目.尽管与stackoverflow并非100％相同，但至少它具有stackoverflow的大多数功能，但您可以在此处查看( http://stack.stephensangkn.org ).但是我故意发出图像上载，因为它与服务器有关.我认为这很酷.您还可以在页面上看到一个下载链接，以下载源代码

Here I did some project which looks much like the stackoverflow's. Though not 100% the same with stackoverflow but at least it has most features with the stackoverflow, You can check it out here (http://stack.stephensangkn.org). But I intentionally emitted the image uploading because it has to do with the server. I think it's pretty cool. You can also see a download link in the page to download the source code

这篇关于如何在文本区域中实现编号列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！