javascript - 空白输入将短行添加到待办事项列表

Question

当您在我的待办事项列表的输入框内单击并按回车键时，列表中会添加一条细线。 (当您输入文本时，行高为常规高度。)这可能是什么原因造成的？

请查看my CodePen对于我的完整代码。我不确定这是否相关，但这是我的 JavaScript:

$(function() {

  $('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      e.preventDefault();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});

Answer 1

只需检查您要添加的值:

$('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    if( toAdd == ""){
      return false; // return on empty value
    }
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });