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

Question

有没有办法将项目符号点添加到 HTML 文本区域？

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

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

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

Answer 3

您可以通过捕获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>

Answer 4

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

J.伯努瓦。

Answer 5

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

Answer 6

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

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

Answer 7

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

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