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

【问题标题】：How to implement inbuilt Bullet List within TextArea using Javascript?如何使用 Javascript 在 TextArea 中实现内置的项目符号列表？
【发布时间】：2016-01-24 10:08:17
【问题描述】：

我使用了 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);
}
}

Output Image

【问题讨论】：

为什么不使用无序列表呢？使用<ul> 并简单地将li 元素附加到按键上的无序列表中。
你是对的，但如果我这样做会违反应用程序布局。 :(

标签： javascript jquery bulletedlist

【解决方案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" 来编辑每个单独的列表项

【讨论】：

这是非常好的解决方案#ZachPerkitny，但它严格要求我只能使用 textarea。如果您能在 textarea 提供帮助，那就太好了。