发表新帖
发表新帖

Adding bullet points to a text area?

前端 未结
关注
7 1064
青春惊慌失措
青春惊慌失措 2021-02-10 16:27

Is there a way to add bullet points to an HTML textarea?

I want to add a simple feature where a bullet point is added for every line in a text area (similar to a list bu

相关标签:
7条回答
  • 伪装坚强ぢ
    2021-02-10 17:07

    u can just by the select change fuction through catch the id and reduce the code

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

    0 讨论(0)
  • 栀梦
    2021-02-10 17:08

    Just use the hexidecimal unicode value: \u2022 . So you might add bullets to new lines in this manner:

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

    0 讨论(0)
  • 独厮守ぢ
    2021-02-10 17:13

    Simple use the below characters &#9679 for the bullets:

        <textarea rows="6" cols="20">
    &#9679 Item1
    &#9679 Item2
    &#9679 Item3
    &#9679 Item4
    &#9679 Item5
    </textarea>
    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-10 17:18

    This does the job very nicely. Set BULLET to whatever character code you prefer.

    <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>
    0 讨论(0)
  • 再見小時候
    2021-02-10 17:19

    I think, you will not able to add bullet points (i.e. rich text) in text area or any other html input control.

    But you may achieve result by adding Rich-text editor. OR Need to write jquery to handle the event and display the result, Like if user is simply viewing content then show that in html-css format and if user clicks on the content then show text area and allow to add more text. 

    <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);
     }
   });

    Here is a demo https://jsfiddle.net/v5unL369/1/

    0 讨论(0)
  • 佛祖请我去吃肉
    2021-02-10 17:23

    As far as I know, you can't. But, you can get WYSIWYG editor where you can use bullets lists, and more (like images, bold, italic, etc .). Those WYSIWYG editor are fully customizable, so you can enable just the options you need. The most famous ones are : CKEDITOR : http://ckeditor.com/ TinyMCE : http://www.tinymce.com/

    J. BENOIT.

    0 讨论(0)
 看不清?
提交回复
热议问题