javascript - 如何使用 Javascript 在 TextArea 中实现内置的项目符号列表？

Question

我使用了 jsfiddle.net 的以下代码，但它有一个错误，如果我们非常迅速地按 Enter 键 + 字符键，它会生成以下输出。

//Javascript代码

function onfoc()
{
if(document.getElementById('todolist').value =="")
{
    document.getElementById('todolist').value +='• ';
}
}

function bulletOnEnter(){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){

    document.getElementById("todolist").value +='• ';

}
var txtval = document.getElementById('todolist').value;
if(txtval.substr(txtval.length - 1) == '\n'){
    document.getElementById('todolist').value = txtval.substring(0,txtval.length - 1);
}
}

输出图像

Answer 1

使用无序列表试试这个：

html:

<ul id="todo">
  <li>stuff</li>
  <li>More stuff</li>
</ul>
<input id="addItems" type="text" />

既然您说您使用的是 jQuery，您可以简单地将另一个列表元素附加到文本框的当前值，然后将其清除。

$(document).ready(function(){
    //event listener
  $('#addItems').on('keypress', function(event){
    if(event.which === 13){
      event.preventDefault();
      var text = $('#addItems').val();
      $('#todo').append('<li>' + text + '</li>');
      //clear textbox
      $('#addItems').val('');
    }
  });
});

JSFiddle： https ://jsfiddle.net/k9hx7pdf/

编辑：您可以添加contenteditable="true"然后编辑每个单独的列表项