如何使用 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);
}
}

Output Image

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" 以编辑每个单独的列表项

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

How to implement inbuilt Bullet List within TextArea using Javascript?

javascript

jquery

bulletedlist