Question

当您在我的待办事项列表的输入框内单击并按Enter键时，会在列表中添加一个小行。（当您输入文本时，行高是常规高度。）可能导致此问题的原因是什么？

请查看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('');
  });

Answer 2

以下两个答案都是正确的，因此被投票但你可以尝试添加验证以消除这种情况

＆＃13;

$(function() {

  $('.button').click(function() {
    let toAdd = $('input[name=listItem]').val();
    if (toAdd === '') {
      alert("Input should not be blank");
      $('input[name=listItem]').focus();
      return;
    }
    // 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');
  });

});

＆＃13;

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  font-size: 14px;
  color: #666;
  background: linear-gradient(to left, #da4453, #89216b);
}

.container {
  padding: 20px;
  padding-top: 5px;
  width: 400px;
  /* 0 is for top and bottom and auto (set to equal values for each by browser) for left-right */
  margin: 0 auto;
  margin-top: 40px;
  background: #eee;
  border-radius: 5px;
}

form {
  /* Needed to display button next to input box  */
  display: inline-block;
}

input[type="text"] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 29em;
  color: #666;
}

/* Sets appearance of input box boundaries when user clicks inside it */
input:focus {
  border-color: #da4453;
  /* L to R: horizontal offset, vertical offset, blur radius. A in RGBA is alpha parameter, a number between 0.0 (fully transparent) and 1.0 (fully opaque) */
  box-shadow: 0 0 8px rgba(229, 103, 23, 0.6);
  outline: 0 none;
}

button.button {
  margin-left: -29.8px;
  /* 2px added to account for default 1px padding of input box set by user agent (browser) stylesheet */
  height: -webkit-calc(1.6em + 2px);
  height: calc(1.6em + 2px);
  width: 25px;
  color: grey;
  border: none;
}

.button:hover {
  cursor: pointer;
  opacity: 0.8;
  color: #9a9797;
}

/* Remove margins and padding from list */
ul {
  margin: 0;
  padding: 0;
}

/* Applies styling to any li descendants of ul (descendant combinator) */
ul li {
  text-align: left;
  /* Prevents default bullet points */
  list-style-type: none;
  margin: auto;
  cursor: pointer;
  position: relative;
  background-color: #eee;
  /* First value sets top and bottom padding; second value sets right and left */
  padding: 1.5px 0;
}

/* Set all odd list items to a different color (zebra stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Sets darker background color on hover over list items */
ul li:hover {
  background-color: #ddd;
}

.strike {
  text-decoration: line-through;
}

＆＃13;

<html>
    <head>
      <meta charset="UTF-8">
    	<title>To-Do List</title>
      <link rel="stylesheet" href="styles.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="designs.js"></script>
  	</head>
  	<body>
      <div class="container">
    		<h2>To Do</h2>
    		<form name="listForm">
    			<input type="text" name="listItem" placeholder="Add new">
          <button type="button" class="button">+</button>
        </form>
    		<br><br>
    		<ul>
          <li>Work on projects for one hour</li>
          <li>Go for a walk</li>
          <li>Call parents</li>
        </ul>
      </div>
  	</body>
  </html>

＆＃13;

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

Answer 3

尝试添加一项检查，看看输入框中是否有任何内容：

$('.button').click(function() {
  let toAdd = $('input[name=listItem]').val();
  if (toAdd === '') return;

Answer 4

使用ES6语法

    $('.button').on('click'() =>  {
    let toAdd = $('input[name=listItem]').val();
    toAdd === '' ? return : null

空白输入为待办事项列表添加短行

4 个答案: