logo标签列表

在文本区域添加项目符号

textareapoints
8

有没有一种方法可以在HTML文本域中添加项目符号？

我想要添加一个简单的功能，使每一行文本区域中都有一个项目符号（类似于列表项目符号）。

这个答案看起来很有帮助：https://stackoverflow.com/a/57042927/5746368 - jim1427
8个回答
15

你不能这样做，但有另一种方法。删除文本区域：

<section id="textarea" contenteditable="true">
    <ul>
        <li>List item here</li>
        <li>List item here</li>
        <li>List item here</li>
        <li>List item here</li>
    </ul>

</section>
请注意，contenteditable 允许用户将富文本 HTML 粘贴到列表项中。对于许多人来说，这可能是一个不需要的副作用。 - Rick Westera
contenteditable 是一个很棒的功能！你可以将其应用于任何 DOM 元素。 - Gibolt
为什么要用单引号？ - Peter Mortensen
2

我认为你不能在

我在上面的jsFiddle中进行了分支，以添加用户输入项目到列表的功能；请参见https://jsfiddle.net/v9sq62eo/1/。 - Nosnetrom
我在上面的jsFiddle上进行了分支，以添加用户输入项目到列表的功能；请参见https://jsfiddle.net/v9sq62eo/1/。 - undefined
1
你可以通过捕获ID并减少代码，仅通过选择更改函数来完成它：
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

        $("#Projectone").focus(function () {
            if (document.getElementById('Projectone').value === '') {
                document.getElementById('Projectone').value += '• ';
            }
        });

        $("#Projectone").keyup(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                document.getElementById('Projectone').value += '• ';
            }
            var txtval = document.getElementById('Projectone').value;
            if (txtval.substr(txtval.length - 1) == '\n') {
                document.getElementById('Projectone').value = txtval.substring(0, txtval.length - 1);
            }
        });

        // Second project
        $("#Projecttwo").focus(function () {
            if (document.getElementById('Projecttwo').value === '') {
                document.getElementById('Projecttwo').value += '• ';
            }
        });

        $("#Projecttwo").keyup(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                document.getElementById('Projecttwo').value += '• ';
            }
            var txtval = document.getElementById('Projecttwo').value;
            if (txtval.substr(txtval.length - 1) == '\n') {
                document.getElementById('Projecttwo').value = txtval.substring(0, txtval.length - 1);
            }
        });


        // Third project
        $("#Projectthree").focus(function () {
            if (document.getElementById('Projectthree').value === '') {
                document.getElementById('Projectthree').value += '• ';
            }
        });

        $("#Projectthree").keyup(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                document.getElementById('Projectthree').value += '• ';
            }
            var txtval = document.getElementById('Projectthree').value;
            if (txtval.substr(txtval.length - 1) == '\n') {
                document.getElementById('Projectthree').value = txtval.substring(0, txtval.length - 1);
            }
        });

        // Fourth project
        $("#Projectfour").focus(function () {
            if (document.getElementById('Projectfour').value === '') {
                document.getElementById('Projectfour').value += '• ';
            }
        });

        $("#Projectfour").keyup(function (event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                document.getElementById('Projectfour').value += '• ';
            }
            var txtval = document.getElementById('Projectfour').value;
            if (txtval.substr(txtval.length - 1) == '\n') {
                document.getElementById('Projectfour').value = txtval.substring(0, txtval.length - 1);
            }
        });

    </script>
</body>
</html>
这个回答如何回答问题？里面有一些项目符号（“•”）。需要解释一下。例如，“捕获id”和“减少代码”是什么意思。主要思想是什么？根据帮助中心的说法：“...始终解释为什么您提出的解决方案是合适的以及它是如何工作的”。请通过编辑（更改）您的答案来回应，而不是在此处进行评论（不包括“Edit：”，“Update：”或类似内容 - 答案应该看起来像今天写的）。 - Peter Mortensen
1
这个非常好地完成了工作。将BULLET设置为您喜欢的任何字符代码即可。
<head>
    <script>
        var CRLF   = 10;
        var BULLET = String.fromCharCode(45);

        function Init() {
            if (txt.addEventListener) txt.addEventListener("input", OnInput, false);
        }

        function OnInput(event) {
            char = event.target.value.substr(-1).charCodeAt(0);
            nowLen = txt.value.length;

            if (nowLen > prevLen.value) {
                if (char == CRLF) txt.value = txt.value + BULLET + " ";
                if (nowLen == 1) txt.value = BULLET + " " + txt.value;
            }
            prevLen.value = nowLen;
        }
    </script>
</head>

<body onload="Init ();">
    <h4>Automatic bullets in a text box</h4>
    <textarea id="txt" rows="15" cols="40"></textarea>
    <input type="hidden" id="prevLen" value="0"/>
</body>
这个很好用，只需从文本区域HTML中删除冗余的oninput = ""属性，否则它会被调用两次。 - harvest316
谢谢@harvest316，我已经从代码中删除了冗余的oninput =“”。 - CodeCabbie
这个功能很好，但是当你在文本内容中间按下回车键时，它不会添加新的项目符号。只有当你在当前文本值的末尾时才会添加。你有什么想法可以让它正常工作吗？ - Andrew Garrison
1

对于其他遇到这个问题的人，这是我解决它的方法：

.text-area {
  display: list-item;
  margin-left : 1em;
  outline: none;
}
.text-area div {
  display: list-item;
}
<div class="text-area" contenteditable="true">
  
</div>

0

只需使用十六进制Unicode值：\u2022（BULLET）。因此，您可以通过以下方式将项目符号添加到新行：

$textarea.val($textarea.val().replace(/\n/g,"\n\u2022").replace(/\r/g,"\r\u2022"))

0
据我所知，你不能这样做。
但是，你可以使用所见即所得编辑器，其中你可以使用项目列表等更多功能（如图像、粗体、斜体等）。
这些所见即所得编辑器是完全可定制的，因此你可以仅启用你需要的选项。
最著名的编辑器包括：
0

使用以下字符 ● 来表示项目符号：

<textarea rows="6" cols="20">
    &#9679 Item1
    &#9679 Item2
    &#9679 Item3
    &#9679 Item4
    &#9679 Item5
</textarea>
9679是什么？Unicode代码点[U+25CF]（https://www.utf8-chartable.de/unicode-utf8-table.pl?start=9669&number=128）（黑色圆形）？ - Peter Mortensen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接