向文本区域添加项目符号？

Posted 2023-05-07

【中文标题】向文本区域添加项目符号？

【英文标题】：Adding bullet points to a text area?

【发布时间】：2012-07-28 18:53:52

【问题描述】：

有没有办法向 html 文本区域添加项目符号？

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

【问题讨论】：

这个答案似乎很有帮助：***.com/a/57042927/5746368

【参考方案1】：

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

'<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 文本粘贴到列表项中的操作。对许多人来说，这可能是一种不想要的副作用。

contenteditable 是一个了不起的功能！您可以将其应用于任何 dom 元素

【参考方案2】：

我认为，您将无法在文本区域或任何其他 html 输入控件中添加项目符号（即富文本）。

但是您可以通过添加富文本编辑器来实现结果。 要么 需要编写 jquery 来处理事件并显示结果，例如，如果用户只是查看内容，则以 html-css 格式显示，如果用户单击内容，则显示文本区域并允许添加更多文本。

<textarea id="banner-message" class="message" style="display:none">
</textarea>

<div id="display" class="message" style="overflow-y:auto">
</div>



var strings = [];
strings.push(
  "first text",
  "second text",
  "third text"
);

var htmlContent='';
var textAreaContent='';
$(document).ready(function()
    strings.forEach(element => htmlContent += "<li>"+element+"</li>");
    $("#display").html(htmlContent);
    var i=1;
    strings.forEach(function(element) 
    if(strings.length==i)
        textAreaContent += ">"+ element;
    else
        textAreaContent += ">"+ element+"\n";
    i++;
  );
  $("#banner-message").val(textAreaContent);  
)

$("#display").click(function()
    $(this).css("display","none");
  $("#banner-message").css("display","");
  var currentText= $("#banner-message").val();
  //currentText+="\n>";
  $("#banner-message").val(currentText);
    $("#banner-message").focus();
);

$("#banner-message").blur(function()
 var currentText=$("#banner-message").val();
 var plainText=currentText.replace(/>/g, "")
 var splitText=plainText.split("\n");
 console.log(splitText);
    htmlContent='';
    splitText.forEach(element => htmlContent += "<li>"+element+"</li>");
    $("#display").html(htmlContent);

    $(this).css("display","none");
  $("#display").css("display","");
)

$("#banner-message").keyup(function(e) 
   var code = e.keyCode ? e.keyCode : e.which;
   if (code == 13)   
            var text=$(this).val();
        text+=">";
        $(this).val(text);
     
   );

这是一个演示https://jsfiddle.net/v5unL369/1/

【参考方案3】：

你可以通过捕获id来通过select改变函数来减少代码

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

【参考方案4】：

据我所知，你不能。 但是，您可以获得所见即所得的编辑器，您可以在其中使用项目符号列表等（如图像、粗体、斜体等）。 这些所见即所得的编辑器是完全可定制的，因此您可以只启用您需要的选项。 最著名的是： CKEDITOR：http://ckeditor.com/ TinyMCE：http://www.tinymce.com/

J。贝诺特。

【参考方案5】：

只需使用十六进制的 unicode 值： \u2022 。因此，您可以通过这种方式将项目符号添加到新行：

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

【参考方案6】：

简单地使用以下字符 ● 作为项目符号：

    <textarea rows="6" cols="20">
    &#9679 Item1
    &#9679 Item2
    &#9679 Item3
    &#9679 Item4
    &#9679 Item5
    </textarea>

【参考方案7】：

这很好地完成了这项工作。将 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>

【讨论】：

这很好用，只需从 textarea html 中删除多余的 oninput="" 属性，否则您将调用它两次。

感谢 @harvest316，我已经从代码中删除了多余的 oninput=""。

这很好用，但是，当您在文本内容的中间并按回车时，它不会添加新的项目符号。就在您位于当前文本值的末尾时。知道如何让它发挥作用吗？