如何在 HTML/Javascript 中制作自定义的项目符号文本框？

Question

我正在尝试用 HTML/Javascript 制作一个自定义文本框，并满足以下要求：

• 文本框的初始状态将是单个项目符号点，如下所示：
• 每行必须以项目符号点开头，因此当用户键入“enter”时，它将转到新行并自动以项目符号点开始
• 如果他们在只有项目符号点的空行上按“退格键”，则会删除项目符号点并返回到上一行的末尾
• 项目符号点用“tab”标识
• 使用“shift + tab”无法识别项目符号
• 项目符号只能缩进一次
• 支持复制粘贴文本

下图是我试图模拟的单词文本框：

我尝试了几种解决方案，但似乎没有一个能按照我想要的方式工作。我缺少什么简单的东西吗？

Answer 1

您可以使用 JavaScript 和 HTML 来完成此操作。 （CSS 是可选的）

将其记入您的脑海中：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

将其放入您的体内：

<textarea id="customTextbox" rows="4">• </textarea>
<script>
    $(document).ready(function() {
        $("#customTextbox").on("keydown", function(e) {
            if (e.which == 13) {
                e.preventDefault();
                char("\n• ");
            }
            if (e.which == 9) {
                e.preventDefault();
                char("\n  ○ ");
            }
        });
    });
    function char(text) {
        var textbox = document.getElementById("customTextbox");
        var CP = textbox.selectionStart;
        var TBC = textbox.value.substring(0, CP);
        var TAC = textbox.value.substring(CP, textbox.value.length);
        textbox.value = TBC + text + TAC;
        textbox.selectionStart = textbox.selectionEnd = CP + text.length;
        textbox.focus();
    }
</script>

现在你已经完成了。您应该有一个可用的文本框。

按“Enter”将创建一条新线和一个实心项目符号点。 按“Tab”将产生一个新的缩进和一个空的项目符号点。