Question

这是我的HTML -

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> My Shopping List</title>
<link rel="stylesheet" type="text/css" href="shoppinglist.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400|Advent+Pro:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="shoppinglist.js"></script>
</head>

<body>
    <div class="container">
        <p id="shoppinglist"> My Shopping List App</p>

<input type="text" name="user" class="entertext">
<input type="button" value="Enter" class="returnkey">
<br>
<br>
    <ol></ol>
    </div>
</body>
</html>

这是我的JavaScript -

$(document).ready(function () {
    $("input[type='button']").on("click", function() {
        var item = $("input[type='text']").val();
        $("ol").append("<li style='display:none;'>"+ item+"<input type='checkbox'></li><br />");
        $("li:last").show("clip");
    });
    $("input[type='text']").keyup(function(event) {

       if(event.keyCode == 13) {

          $("input[type='button']").click(); 
       }
   });
   $("ol").on("click", "input[type='checkbox']", function() {
       $(this).parent().remove();   
   });

});

如何为输入为空的人创建JavaScript？那么有什么东西阻止他们从空文本输入？

Answer 1

您可以检查文本输入的值是否等于空白字符串：

$("input[type='button']").on("click", function() {
    var item = $("input[type='text']").val();

    //start new code
    if ($.trim(item) === '') {
        alert("Please Enter Something!");
        return false;
    }
    //end new code

    $("ol").append("<li style='display:none;'>"+ item+"<input type='checkbox'></li><br />");
    $("li:last").show("clip");
});

$.trim()删除任何额外的空格，以确保输入不只是将空格作为值。

Answer 2

这样的东西？

$('.returnkey').on('click', function() {

  var string = $.trim($('.entertext').val());

  if (string == '') {
     alert('Field is empty');
     return false;
  }
}

如何防止文本输入形式的空输入？

2 个答案: